在React中创建Web Worker报错：Unexpected token '<' 问题求助

算力阿峰

2026-8-14

解决React中Web Worker报Uncaught SyntaxError: Unexpected token '<'的问题

这个错误的核心原因是浏览器请求worker.js时，拿到的不是预期的JavaScript文件，而是HTML内容（比如项目的index.html页面），文件开头的<html>标签导致语法解析失败。这是因为React项目的打包工具（如Webpack）不会默认处理单独的Worker文件路径，直接使用new Worker('worker.js')会让浏览器去根目录请求该文件，而打包后文件的实际路径与请求路径不匹配，最终返回了HTML页面。

方案一：Create React App 项目（官方推荐写法）

修改App.js中创建Worker的代码，使用URL结合import.meta.url来正确解析Worker文件的路径：

let worker = new Worker(new URL('./worker.js', import.meta.url));
worker.postMessage('Hey!');

worker.onmessage = function(e) {
  console.log('Worker thread says', e.data);
};

这种写法会让Webpack自动处理Worker文件的打包和路径映射，确保浏览器能正确加载到对应的JS文件。

方案二：自定义Webpack配置的项目

如果是自己配置Webpack的React项目，可以通过worker-loader来处理Worker文件：

安装依赖：

npm install worker-loader --save-dev

在Webpack配置文件中添加规则：

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

修改Worker文件名（比如改为worker.worker.js），然后在App.js中导入并创建实例：

import Worker from './worker.worker.js';
let worker = new Worker();

worker.postMessage('Hey!');
worker.onmessage = function(e) {
  console.log('Worker thread says', e.data);
};