SvelteKit中Simple Web Worker在Firefox 106.0.5无法运行求助

主文件中编写的代码：

const loadWorker = async () => {
        const SyncWorker = await import("$lib/canvas.worker?worker");
        syncWorker = new SyncWorker.default();

        syncWorker?.postMessage({});
    };

组件挂载时调用：

onMount(() => {
        console.log("Canvas: mounted");
        loadWorker();
});

canvas.worker.ts文件中的代码：

onmessage = () => {
    console.log("Hello from the worker!");
};

export {};

这段代码在Chrome中可正常打印消息，但在Firefox 106.0.5中报错：

SyntaxError: import declarations may only appear at top level of a module

疑问：是否因为Worker存储在本地系统需要特殊权限？Firefox文档显示浏览器支持Worker功能。

这个问题和本地系统权限无关，核心是Firefox与Chrome对Worker模块的语法处理存在差异。

• 原因分析：
  从?worker后缀判断你使用的构建工具大概率是Vite，它在处理Worker文件时，给Firefox生成的代码中出现了非顶层的import声明，而Firefox对Worker模块的语法校验更为严格。另外，Worker文件中的export {}语句会被构建工具处理成额外的模块代码，进而触发语法错误。

• 解决步骤：

  1. 移除canvas.worker.ts中的export {}语句——Worker本身是独立运行的脚本，不需要这个ES模块导出项。
  2. 配置构建工具生成标准的ES模块格式Worker。如果是Vite，在vite.config.ts中显式指定Worker的格式：

     export default defineConfig({
       worker: {
         format: 'es'
       }
     })
     

  3. 若手动实例化Worker，需确保传递type: 'module'参数（不过Vite的?worker后缀已自动处理此部分，可作为备选方案）：

     new Worker(new URL('./canvas.worker.ts', import.meta.url), { type: 'module' })
     

内容的提问来源于stack exchange，提问作者ring0-collections