在React+Webpack项目的Web Worker中导入fabric.js报错如何解决？

错误根因 #

该报错是因为 fabric 默认引入的构建版本依赖 jsdom 模拟 DOM 环境，而 Web Worker 运行上下文不存在原生 DOM 节点，同时 fabric 加载的 jsdom 实例类型不符合预期导致报错。

需添加的Webpack配置 #

修改你的webpack配置文件，新增如下配置项即可：

module.exports = {
  // 原有其他配置保持不变
  resolve: {
    alias: {
      // 指定fabric加载无DOM依赖的node端构建版本
      'fabric': 'fabric/dist/fabric.node.js'
    }
  },
  externals: {
    // 告诉webpack不需要打包jsdom模块，运行时直接忽略该依赖
    'jsdom': 'commonjs jsdom'
  },
  node: {
    // 补充node全局变量模拟，避免fabric找不到环境变量报错
    __dirname: false,
    __filename: false,
    global: true
  },
  module: {
    rules: [
      // 如果你使用worker-loader处理worker文件，对应规则补充如下配置
      {
        test: /\.worker\.js$/,
        use: [
          {
            loader: 'worker-loader',
            options: {
              worker: {
                type: 'Worker',
                options: {
                  type: 'classic'
                }
              }
            }
          }
        ]
      }
    ]
  }
}

Worker代码的必要修改 #

fabric的node构建版本初始化StaticCanvas不需要传入DOM选择器，将你Worker中实例化canvas的代码修改为如下即可：

const canvas = new fabric.StaticCanvas(null, {
  width:1024,
  height: 1024,
  selection: false,
})

内容的提问来源于stack exchange，提问作者Ajil Paul