无法在web-worker中导入fabric.js？

Question

我正在使用webpack开发一个React.js应用程序。我需要用布料做一项繁重的工作。因此，我尝试使用web worker来实现此目的。我使用worker-loader插件来运行web-worker。我的woker工作得很好。这是我的worker文件

var jsZip = require('jszip')
const PDFDocument = require('@react-pdf/pdfkit').default
const SVGtoPDF = require('svg-to-pdfkit')
const fabric = require('fabric')

self.onmessage = async ({ data: { canvasInfo } }) => {

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

    // Doing heavy work with fabric canvas fn()

    self.postMessage({
      message:"success"
    })
}

但我得到了以下错误：

Uncaught TypeError: jsdom.JSDOM is not a constructor
    at Object../node_modules/fabric/dist/fabric.js (fabric.js:25)
    at __webpack_require__ (bootstrap:21)
    at web.worker.js:5
    at web.worker.bundle.worker.js:140722
    at web.worker.bundle.worker.js:140724

我需要在我的webpack配置中添加什么来解决这个问题吗？

Answer 1

web worker可能有未定义的窗口，正在触发nodejs代码路径。你应该在回购上打开一个问题，我们应该想个解决办法。Fabricjs确实使用了可能在worker中不可用的dom相关方法。