在WebWorker模块中使用lightningcss遇Cannot read properties of undefined错误求助

我尝试在JavaScript应用的WebWorker模块中运行lightningcss，导入方式如下：

import * as lightningcss from './index.mjs';

随后调用该模块的transform方法：

let code = lightningcss.transform({
    code: bufferedTextInput,
    minify: true,
    sourceMap: false
});

但在浏览器中运行脚本时，出现如下错误：

index.mjs:41 Uncaught TypeError: Cannot read properties of undefined (reading 'transform')
    at Module.transform (index.mjs:41:15)
    at wasm-worker.js:9:29

已在网上排查但未解决问题，请问该如何修复？

• 确保WebAssembly加载完成
  lightningcss依赖WebAssembly，多数情况下index.mjs需要异步加载Wasm文件后才能正常导出transform方法。直接同步导入调用会导致方法未初始化，可改为异步导入并等待初始化：

  import('./index.mjs').then(async (lightningcss) => {
    // 若模块有初始化方法（如init()），先执行
    await lightningcss.init();
    let code = lightningcss.transform({
      code: bufferedTextInput,
      minify: true,
      sourceMap: false
    });
  });
  

  同时检查index.mjs代码，确认是否存在需要手动触发的Wasm加载逻辑。

• 验证模块导出结构
  在调用transform前打印lightningcss对象，确认导出内容：

  import * as lightningcss from './index.mjs';
  console.log(lightningcss);
  

  如果输出中没有transform，说明模块导出方式不符。比如模块用了export default而非命名导出，需调整导入方式：

  import lightningcss from './index.mjs';
  

• 检查WebWorker的模块模式
  创建WebWorker时必须指定type: 'module'，否则无法识别ES模块的import语法，导致模块加载失败：

  const worker = new Worker('wasm-worker.js', { type: 'module' });
  

• 确认文件路径正确性
  WebWorker的文件路径是相对于主页面而非Worker脚本本身，检查./index.mjs的路径是否正确。可改用绝对路径或调整相对路径验证，避免因路径错误导致模块内容异常。

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