Next.js+TypeScript项目调用new Worker()报Worker is not defined错误

Next.js 默认开启服务端渲染能力（SSR/SSG/ISR），你当前的Worker初始化逻辑写在useMemo回调中，会在服务端渲染阶段就执行。而Node.js运行环境不存在浏览器原生的Worker API，因此直接抛出Worker is not defined错误。

将Worker初始化逻辑迁移到仅客户端执行的生命周期中，useEffect本身仅会在浏览器端运行，调整后的useWorker.hooks.ts代码如下：

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

// Next.js 13+ App Router 必须在文件顶部添加该行，标记为客户端组件
'use client'

function useWorker() {
  const [workerApi, setWorkerApi] = useState<import("./useWorker.worker").WorkerType | null>(null);
  const [cleanup, setCleanup] = useState<(() => void) | null>(null);

  useEffect(() => {
    const url = new URL("./useWorker.worker", import.meta.url)
    const worker = new Worker(url);
    const api = wrap<import("./useWorker.worker").WorkerType>(worker);

    const cleanupFn = () => {
      api[releaseProxy]();
      worker.terminate();
    };

    setWorkerApi(api);
    setCleanup(() => cleanupFn);

    return cleanupFn;
  }, []);

  return { workerApi, cleanup };
}

function useImplementation() {
  const [data, setData] = useState({});
  const { workerApi } = useWorker();

  useEffect(() => {
    // 等待Worker初始化完成再调用方法
    if (!workerApi) return;
    workerApi.workerFunction();
    setData({});
  }, [workerApi]);

  return data;
}

export default useImplementation;

• 你当前的Worker文件命名为useWorker.worker.ts符合Next.js内置WebWorker支持的命名规范，无需额外配置webpack
• 如果使用Next.js 13+ App Router，所有调用该Hook的上层组件也必须标记'use client'，禁止在服务端组件中调用该Hook
• 调用Worker方法前必须判断workerApi是否为null，避免初始化未完成时报错

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