在React Web Worker中使用require引入npm模块报错的解决方法

1. 原生ES模块方案（现代浏览器支持） #

• 创建Worker时指定type: 'module'参数，让浏览器以ES模块方式加载Worker脚本：

// React组件中创建Worker
const worker = new Worker('./my-worker.js', { type: 'module' });

• 在Worker脚本中使用import替代require引入模块：

// my-worker.js
import packageName from 'package-name';

// 后续正常使用模块

• 注意：如果目标模块是CommonJS格式，可能需要找该包的ES模块版本，或者通过打包工具转译后再使用。

2. Webpack打包工具配置（React项目常用） #

React项目大多基于Webpack，可通过worker-loader或Webpack 5+的Asset Modules处理Worker文件，自动打包模块依赖：

• 安装依赖：

npm install worker-loader --save-dev

• 修改webpack.config.js添加Worker规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]
  }
};

• 在React组件中导入并创建Worker实例：

import MyWorker from './my.worker.js';
const worker = new MyWorker();

• Worker脚本中可正常使用import或require，Webpack会自动将依赖的npm模块打包进Worker文件。

3. Vite项目原生支持 #

Vite对Web Worker有原生支持，无需额外配置：

• 创建.worker.js后缀的Worker脚本，直接在里面用import引入模块：

// my.worker.js
import packageName from 'package-name';

// 业务逻辑

• 在React组件中导入Worker：

import MyWorker from './my.worker?worker';
const worker = new MyWorker();

4. 手动加载UMD格式模块 #

如果上述方案不适用，可手动加载模块的UMD版本：

• 找到目标npm包的UMD格式文件（通常在包的dist目录下）
• 在Worker脚本中通过importScripts加载：

// my-worker.js
importScripts('../node_modules/package-name/dist/package-name.umd.js');

// 通过全局变量使用模块，具体变量名参考包的文档
const packageName = window.packageName;

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