使用Comlink创建Web Worker时遇语法与模块导入问题求助

错误原因拆解 #

1. 「Uncaught SyntaxError: Unexpected token '<'」 #

当Worker文件放在React项目的src目录下时，打包工具（如Webpack/Vite）会将其当作普通组件模块处理，但Worker的加载逻辑是直接请求文件URL，此时服务器返回的是HTML页面（比如404页面或项目入口HTML），Worker解析时遇到HTML的<符号就会触发语法错误。

2. 「无法在模块外使用import」 #

Web Worker默认以非模块模式运行，不支持ES模块的import语法。即使将Worker移到public目录，浏览器加载时仍会将其视为普通脚本，因此遇到import语句就会报错。

修复方案 #

步骤1：配置Worker以模块模式加载 #

创建Worker实例时，必须显式指定type: 'module'参数，让浏览器以ES模块模式加载Worker文件：

const worker = new Worker("/worker/worker.js", { type: "module" });

同时确保Worker文件放在public目录下（比如public/worker/worker.js），保证浏览器能直接访问到该文件。

步骤2：调整模块导入路径 #

Worker在public目录下时，导入其他模块的路径需要相对于public根目录。比如原代码中的../renderPDF需要改为对应编译后文件的路径（假设renderPDF编译后放在public根目录下，路径应为./renderPDF.js）。

步骤3：优化Comlink导入（可选） #

如果不想依赖CDN的Comlink，可以在项目中本地安装：

npm install comlink

然后将Worker内的Comlink导入改为本地模块：

import * as Comlink from "comlink";

修改后的完整代码 #

1. Worker文件（public/worker/worker.js） #

import * as Comlink from "comlink";

const renderPDFInWorker = async (props) => {
  try {
    // 路径根据renderPDF编译后的实际位置调整
    const { renderPDF } = await import("../renderPDF.js");
    return URL.createObjectURL(await renderPDF(props));
  } catch (error) {
    console.error(error);
    throw error;
  }
};

Comlink.expose({ renderPDFInWorker });

2. React自定义钩子 #

import { useEffect, useState } from "react";
import { wrap } from "comlink";

const useRenderPDF = ({ text }) => {
  const [url, setUrl] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 关键：添加type: 'module'，使用绝对路径指向public目录下的Worker
    const worker = new Worker("/worker/worker.js", { type: "module" });
    const PDFWorker = wrap(worker);
    const fetchData = async () => {
      setLoading(true);
      try {
        const newUrl = await PDFWorker.renderPDFInWorker({ text });
        setUrl(newUrl);
        setLoading(false);
      } catch (e) {
        setError(e.message);
        setLoading(false);
      }
    };

    fetchData();

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

  useEffect(() => {
    return () => {
      if (url) {
        URL.revokeObjectURL(url);
      }
    };
  }, [url]);

  return {
    url,
    loading,
    error,
  };
};

export default useRenderPDF;

额外注意事项 #

• 若使用Vite，无需将Worker移到public目录，直接用以下方式创建Worker即可，Vite会自动处理打包：

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

• 若使用Create React App，默认Webpack配置对Worker的支持有限，可通过react-app-rewired修改配置，或直接采用public目录方案。

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