在Astro中使用react-konva时出现Cannot find module 'canvas'错误的求助

大家好，我最近在Astro项目里尝试集成react-konva做图形交互组件的时候，碰到了个让人头疼的错误，折腾了好一会儿才搞定，特意来分享我的问题经过和解决办法，希望能帮到踩同样坑的朋友。

问题重现的步骤 #

• 第一步：跟着入门示例创建了components/Main.tsx组件，代码如下：

import { Stage, Layer, Rect, Circle, Text } from 'react-konva';

export default function Main() {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text text="Try to drag shapes" fontSize={15} />
        <Rect x={20} y={50} width={100} height={100} fill="red" shadowBlur={10} draggable />
        <Circle x={200} y={100} radius={50} fill="green" draggable />
      </Layer>
    </Stage>
  )
}

• 第二步：在index.astro的前置代码块里导入这个组件，然后在页面中加入<Main/>标签来使用它：

---
import Main from '../components/Main.tsx';
---

<Main/>

• 第三步：启动开发服务器后，直接弹出了错误提示：

18:47:08 [ERROR] Cannot find module 'canvas'

问题原因 #

这个错误其实很好理解：react-konva底层依赖的konva库，在Node.js环境（也就是Astro的服务端预渲染环节）运行时，需要canvas模块来提供图形渲染的模拟能力，而Astro的默认开发环境并没有预装这个依赖，所以就出现了找不到模块的报错。

解决办法 #

只需要在项目根目录运行对应的命令安装canvas依赖即可，不同包管理工具的命令如下：

• 如果你用npm：

npm install canvas --save-dev

• 如果你用yarn：

yarn add canvas --dev

• 如果你用pnpm：

pnpm add canvas -D

安装完成后重启Astro的开发服务器，这个错误就会消失，你的react-konva组件也能正常渲染啦。

内容来源于stack exchange