我正在try 用react、nextjs和typescript开发在线board应用程序(项目组合).
所以我在将rawjs导入画布时遇到了问题.tsx.
这是画布.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="relative flex h-full w-full"
></canvas>
)
}
export default Canvas
在浏览器中,我有SyntaxError: Unexpected token 'export'
个.
VS代码在import rough from 'roughjs/bundled/rough.esm'
中也给出了这个错误:
Could not find a declaration file for module 'roughjs/bundled/rough.esm'. 'C:/Stepan/online board/website/node_modules/.pnpm/roughjs@4.5.2/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"
}
}
请帮帮我,我try 了所有我能在互联网上找到的,没有任何帮助.
我try 的内容:
https://github.com/rough-stuff/rough/issues/145
Getting Unexpected Token Export
以下是该项目的github代码: