如何在React Web Worker中引入npm包？解决__webpack_require__未定义错误

核心原因 #

你遇到的错误是因为直接将函数传给useWorker时，函数会被序列化为字符串注入Worker环境，而webpack并没有编译这段字符串里的require语句，导致Worker中不存在webpack的模块加载机制（即__webpack_require__）。必须让webpack单独打包Worker代码，才能正确处理npm模块的导入。

方案一：使用独立Worker文件 + 原生Worker API（最可靠） #

1. 创建独立Worker文件
   在src目录下新建calculation.worker.js，直接用ES模块语法导入npm包：

// src/calculation.worker.js
import package from 'package-name';

// 监听主线程消息
self.onmessage = async (e) => {
  const dates = e.data;
  // 执行你的业务逻辑
  const result = await package.someMethod(dates);
  // 将结果返回主线程
  self.postMessage(result);
};

// 处理错误
self.onerror = (error) => {
  console.error('Worker error:', error);
  self.postMessage({ error: error.message });
};

2. 在App.js中使用原生Worker API
   替换原来的useWorker用法，直接创建Worker实例：

// src/App.js
import React, { useState, useEffect } from 'react';

function App() {
  const [calculateStatus, setCalculateStatus] = useState(false);
  const [worker, setWorker] = useState(null);

  // 初始化Worker
  useEffect(() => {
    const newWorker = new Worker(new URL('./calculation.worker.js', import.meta.url));
    
    // 接收Worker返回的结果
    newWorker.onmessage = (e) => {
      if (e.data.error) {
        console.error('Worker returned error:', e.data.error);
      } else {
        console.log("Worker result", e.data);
      }
      setCalculateStatus(false);
    };

    setWorker(newWorker);

    // 组件卸载时终止Worker
    return () => newWorker.terminate();
  }, []);

  const Test = () => {
    if (!worker) return;
    setCalculateStatus(true);
    // 向Worker发送数据
    worker.postMessage(dates);
  };

  return (
    <div>
      <button onClick={Test} disabled={calculateStatus}>
        {calculateStatus ? '计算中...' : '开始计算'}
      </button>
    </div>
  );
}

export default App;

方案二：用react-app-rewired配置worker-loader（适配useWorker） #

如果你想继续使用useWorker库，需要通过react-app-rewired让webpack正确处理Worker文件：

1. 安装依赖

npm install worker-loader --save-dev

2. 修改config-overrides.js
   更新webpack配置，添加worker-loader规则并修正全局对象：

// config-overrides.js
module.exports = function override(config, env) {
  // 添加worker-loader，处理.worker.js后缀的文件
  config.module.rules.push({
    test: /\.worker\.js$/,
    use: {
      loader: 'worker-loader',
      options: { esModule: true }
    }
  });

  // 将全局对象设置为self，避免Worker环境中的全局变量冲突
  config.output.globalObject = 'self';

  return config;
};

3. 创建带后缀的Worker文件
   新建src/calculation.worker.js，用export导出处理函数：

// src/calculation.worker.js
import package from 'package-name';

export default async function handleMessage(dates) {
  // 执行业务逻辑
  return await package.someMethod(dates);
}

4. 在App.js中配合useWorker使用
   导入Worker并传给useWorker：

// src/App.js
import React, { useState } from 'react';
import { useWorker } from 'react-use-worker';
import Worker from './calculation.worker.js';

function App() {
  const [calculateStatus, setCalculateStatus] = useState(false);
  // 传入Worker实例给useWorker
  const [calculateWorker, { status: calculateWorkerStatus, kill: killWorker }] = useWorker(new Worker(), { timeout: 5000 });

  const Test = () => {
    calculateWorker(dates)
      .then(result => {
        console.log("Worker result", result);
      })
      .catch(err => {
        console.error('Worker error:', err);
      });
  };

  return (
    <div>
      <button onClick={Test} disabled={calculateWorkerStatus === 'running'}>
        {calculateWorkerStatus === 'running' ? '计算中...' : '开始计算'}
      </button>
    </div>
  );
}

export default App;

方案三：临时方案（仅适用于小型可序列化模块） #

如果你的npm模块体积小且支持序列化，可以在主线程导入后传给Worker：

// src/App.js
import React, { useState } from 'react';
import { useWorker } from 'react-use-worker';
import package from 'package-name';

// 处理函数接收传入的模块实例
const handleMessage = async (dates, importedPackage) => {
  return await importedPackage.someMethod(dates);
};

function App() {
  const [calculateWorker] = useWorker(handleMessage, { timeout: 5000 });

  const Test = () => {
    calculateWorker(dates, package)
      .then(result => console.log("Worker result", result));
  };

  return <button onClick={Test}>开始计算</button>;
}

export default App;

⚠️ 注意：此方法可能导致模块被重复打包，且部分依赖环境的模块无法序列化，不推荐用于复杂场景。

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