React项目中Web Worker未响应消息且报语法错误求助

你遇到的Unexpected token '<'错误是关键突破口——这说明浏览器请求SolveWorker.js时，拿到的不是预期的JS文件，而是HTML内容（大概率是你的React项目入口index.html）。当浏览器尝试把HTML当作JS解析时，自然会在第一个<符号处报错，Worker也就没法正常工作了。下面是具体的解决思路和方案：

核心原因 #

React项目（尤其是用Create React App搭建的）的静态文件服务规则导致：你用相对路径../../Workers/SolveWorker.js请求Worker文件时，开发服务器没有正确找到这个文件，而是返回了SPA的 fallback HTML页面，最终引发解析错误。

解决方案 #

方案1：将Worker文件移到public目录（Create React App 推荐做法） #

Create React App的public目录下的文件会被直接部署到项目根路径，不会被webpack编译，所以能被浏览器直接访问到：

1. 在项目根目录的public文件夹里创建Workers子目录，把SolveWorker.js移进去。
2. 修改组件中的Worker初始化代码，使用绝对路径：

useEffect(() => {
  console.log('ran');
  // 用根路径开头的绝对路径访问public下的文件
  const worker = new Worker('/Workers/SolveWorker.js');

  worker.postMessage({ type: 'start', data: [5, 10] });
  console.log(worker);

  return () => {
    worker.terminate();
  };
}, []);

方案2：通过webpack配置处理Worker文件（自定义webpack项目适用） #

如果你的项目是自定义webpack配置的，可以用worker-loader来正确打包Worker文件：

1. 先安装依赖：

npm install worker-loader --save-dev

2. 在webpack配置文件中添加Worker的处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.worker\.js$/, // 匹配所有以.worker.js结尾的文件
        use: { loader: 'worker-loader' }
      }
    ]
  }
};

3. 在组件中导入并初始化Worker：

import SolveWorker from '../../Workers/SolveWorker.js';

function Documentation() {
  const [result, setResult] = useState(null);

  useEffect(() => {
    console.log('ran');
    const worker = new SolveWorker();

    worker.postMessage({ type: 'start', data: [5, 10] });
    console.log(worker);

    return () => {
      worker.terminate();
    };
  }, []);
  
  // ...其他代码
}

额外检查项 #

• 确认Worker文件的路径拼写、大小写完全匹配（Linux/macOS环境下服务器区分文件名大小写）。
• 检查开发服务器的配置，确保静态文件请求不会被错误地 fallback 到HTML页面。

修改完成后，重新启动项目，Worker应该就能正常接收消息，控制台会打印出Worker: Message received from main script了。

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