React Vite项目中Web Worker.js导入模块遇语法错误求解决

问题场景 #

组件中调用Web Worker的代码：

const worker = new Worker(new URL("../lib/worker.js", import.meta.url))

function Component() {
  function doWork() {
    worker.postMessage("calling web worker")
  }

  return (
    <button onClick={doWork}>Do Work</button>
  )
}

lib/worker.js文件代码：

import { generateSomething } from 'external-module'

self.onmessage = function (message) {
  console.log("Worker received message", message.data)
  generateSomething()
  self.postMessage("work done.")
}

页面加载时控制台报错：

SyntaxError: Cannot use import statement outside a module

项目已在index.html和package.json中指定type: module，核心依赖版本：

• vite: ^6.0.5
• react: ^18.3.1
• react-dom: ^18.3.1
• @vitejs/plugin-react: ^4.3.4

解决方法 #

方法一：创建Worker时指定模块类型 #

修改组件中创建Worker的代码，添加type: 'module'配置项，明确告知浏览器该Worker是ES模块：

const worker = new Worker(new URL("../lib/worker.js", import.meta.url), {
  type: 'module'
})

方法二：使用Vite原生Worker导入语法（推荐） #

Vite支持直接通过?worker后缀导入Worker文件，会自动处理模块打包、优化等操作，无需手动配置模块类型：

import Worker from '../lib/worker.js?worker'

function Component() {
  // 实例化Worker
  const worker = new Worker()

  function doWork() {
    worker.postMessage("calling web worker")
  }

  return (
    <button onClick={doWork}>Do Work</button>
  )
}

注意事项 #

• 确保external-module已正确安装到项目依赖中
• 若使用TypeScript，可添加?worker&ts后缀以获得类型支持

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