javascript - Typescript και nextjs: ΣυντακτικόΣφάλμα: Απροσδόκητο στοιχείο 'export'

Προσπαθώ να αναπτύξω μια διαδικτυακή εφαρμογή πίνακα (έργο για το portfolio) με React, Next.js, TypeScript. (χρησιμοποιώντας για πρώτη φορά TypeScript)

Έχω πρόβλημα με την εισαγωγή του roughjs στο canvas.tsx.

Ορίστε το canvas.tsx :

import React, {useLayoutEffect} from 'react'
import rough from 'roughjs/bundled/rough.esm'

type Props = {
    backgroundColor?: string
}

const generator = rough.generator()

const Canvas = ({backgroundColor = '#ffffff'}: Props) => {
    useLayoutEffect(() => {
        const canvas = document.getElementById('canvas') as HTMLCanvasElement      
        const ctx = canvas.getContext('2d')

        const roughCanvas = rough.canvas(canvas)
    })
    return (
        <canvas
            id="canvas"
            style={{backgroundColor: backgroundColor}}
            className="h-screen w-screen"
        ></canvas>
    )
}

export default Canvas

Στον περιηγητή έχω Σφάλμα σύνταξης: Απροσδόκητο σύμβολο 'export'.

Και το VS code μου δίνει επίσης αυτό το σφάλμα στο import rough από 'roughjs/bundled/rough.esm':

Could not find a declaration file for module 'roughjs/bundled/rough.esm'. 'C:/Stepan/online board/website/node_modules/.pnpm/[email /node_modules/roughjs/bundled/rough.esm.js' implicitly has an 'any' type. Try 'npm i --save-dev @types/roughjs' if it exists or add a new declaration (.d.ts) file containing 'declare module 'roughjs/bundled/rough.esm';'

Ορίστε το αρχείο json μου:

{
    "type": "module",
    "name": "online_board",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "next": "12.1.6",
        "perfect-freehand": "^1.1.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
        "roughjs": "^4.5.2"
    },
    "devDependencies": {
        "@types/node": "17.0.44",
        "@types/react": "18.0.12",
        "@types/react-dom": "18.0.5",
        "autoprefixer": "^10.4.7",
        "eslint": "8.17.0",
        "eslint-config-next": "12.1.6",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.4",
        "typescript": "4.7.3"
    }
}

Σε παρακαλώ βοήθησέ με, δοκίμασα όλα όσα μπόρεσα να βρω στο Διαδίκτυο, τίποτα δεν βοήθησε.

Αυτό που προσπάθησα:

https://github.com/rough-stuff/rough/issues/145

Λήψη Μη Αναμενόμενου Token Export

εδώ είναι ο κώδικας του GitHub αυτού του έργου:

https://github.com/pan-grayza/School-Online-Board

Απάντηση #1

Το module δεν συνοδεύεται από δηλώσεις τύπων. Σε αυτή την περίπτωση μπορείτε να μεταβείτε στη σύνταξη require του commonjs και θα πρέπει να λειτουργήσει:

const rough = require('roughjs/bundled/rough.cjs')

Επίσης, δεν γράφεις τίποτα στον πρόχειρο καμβά σου. Για να γράψεις μπορείς να κάνεις κάτι σαν αυτό:

const roughCanvas = rough.canvas(canvas)
roughCanvas.circle(80, 120, 50);