docusuaurus使用react-konva组件

说明

docusaurus在使用react-konva绘制canvas时开发时正常编译打包时报错如下

Module not found: Error: Can't resolve 'canvas' in 'D:\myworkspace\personal-blog\littley-blog\node_modules\konva\cmj'
Did you mean './canvas'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (D:\myworkspace\personal-blog\littley-blog\node_modules\@docusaurus\core\node_modules, node_modules, D:\myworkspace\personal-blog\littley-blog\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

该报错说明后端编译时需要node-canvas

安装node-canvas

yarn add canvas yarn add node-loader

如果按不成功需要开启代理,因为需要从github拉取源码

docusaurus配置webpack loader

在module rules 添加node-loader

 function myPlugin() {
     
        return {
          name: 'custom-docusaurus-plugin',
          configureWebpack(config, isServer, utils) {
       
            return {
              // devServer: {
              //   headers: { 'application/wasm': 'wasm' },
              // },
              
              experiments: {  asyncWebAssembly: true,
                syncWebAssembly: true,},
              module: {
                rules: [
                  {
                    mimetype: 'application/wasm',
                    type: 'wasm',
                  },
                  {
                    // webpack load native module 
                    test: /\.node$/,
                    loader: "node-loader" 
                  }
                ],
              },
            };
          },
        };
      },

其他

react konva的安装需要安装react-konva konva同时注意新版本的需要react18才行

yarn add react-konva konva

总结

在后端渲然框架如nextjs astro中使用react-konva 都需要处理node-canvas的问题