使用Electron+Webpack时worker内无法找到path模块如何解决？

核心原因 #

你配置的webpack path fallback未生效，是因为worker-loader的打包上下文独立于主webpack配置，针对主进程、渲染进程的polyfill配置不会自动应用到Worker打包流程中。同时essentia.js内部默认引入了Node.js原生path模块用于WASM文件路径解析，Web Worker运行环境下不存在该原生模块，因此触发报错。

修复步骤 #

• 第一步：安装path的浏览器端polyfill

npm install path-browserify --save

• 第二步：调整webpack配置，给worker-loader单独注入模块解析规则

module.exports = {
  // 原有其他配置保持不变
  module: {
    rules: [
      {
        test: /\.worker\.js$/,
        loader: 'worker-loader',
        // 新增以下配置，覆盖Worker打包上下文的resolve规则
        options: {
          worker: {
            resolve: {
              fallback: {
                "path": require.resolve("path-browserify"),
                // 后续如果出现其他Node原生模块报错，可在此处补充对应fallback
                "fs": false,
                "crypto": false
              }
            }
          }
        }
      },
      // 其他原有loader规则保持不变
    ]
  },
  // 原有全局resolve fallback可保留，供非Worker的业务代码使用
  resolve: {
    fallback: {
      "path": require.resolve("path-browserify"),
    }
  }
}

• 可选兼容处理：如果修改配置后仍有报错，在worker.js的首行手动补充运行时环境变量，关闭essentia.js的Node环境判断逻辑：

self.process = { env: { NODE_ENV: 'production' } };
import { Essentia, EssentiaWASM } from 'essentia.js';
let essentia = new Essentia(EssentiaWASM);

self.addEventListener('message', (event) => {
  console.log(essentia.version);
})

备注：如果你使用的是3.0以下版本的worker-loader，不支持上述options.worker.resolve配置，可以直接在worker.js的最顶部手动挂载path polyfill：

import path from 'path-browserify';
globalThis.path = path;
// 后续接原有业务代码

• 最后清除webpack缓存重新打包即可解决报错。

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