我正在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代码:

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

推荐答案

该模块未与类型声明Bundle 在一起.在这种情况下,您可以切换到commonjs require语法,它应该可以工作:

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

而且,你没有在粗糙的画布上写任何东西.要写作,你可以这样做:

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

Javascript相关问答推荐

在我的html表单中的用户输入没有被传送到我的google表单中

如何用拉威尔惯性Vue依赖下拉?

虚拟滚动实现使向下滚动可滚动到末尾

如何将多维数组插入到另一个多维数组中?

Next.js服务器端组件请求,如何发送我的cookie token?

确保函数签名中的类型安全:匹配值

try 使用PM2在AWS ubuntu服务器上运行 node 进程时出错

回溯替代方式

为什么云存储中的文件不能公开使用?

如何使用基于promise (非事件emits 器)的方法来传输数据?

使用线性插值法旋转直线以查看鼠标会导致 skip

将Singleton实例设置为未定义后的Angular 变量引用持久性行为

如何使用puppeteer操作所有选项

Plotly.js栏为x轴栏添加辅助文本

如何用react组件替换dom元素?

在执行console.log(new X())时记录一个字符串

如果我将高度设置为其内容的100%,则在Java脚本中拖动以调整面板大小时会冻结

正在发出错误的URL请求

如何将类列表切换应用到具有相同类的多个按钮?

即使当前目录中存在文件,ReadFileSync也找不到文件