NodeJS Chrome扩展项目Mac正常Windows构建报错求助

我正在开发一款基于React的Google Chrome扩展，弹窗页面使用React构建。项目在macOS环境下运行、构建均正常，但在Windows系统执行npm run build时出现报错，错误信息为callback(): The callback was already called。

错误日志 #

npm-run-all build:*
 bookmarkify@2.0.0 build:contentscript-background
 NODE_ENV=production webpack --config webpack.config.js
ℹ ｢atl｣: Using typescript@5.1.6 from typescript
ℹ ｢atl｣: Using tsconfig.json from E:/Bookmarkify-React/tsconfig.json
Error in bail mode: Error: callback(): The callback was already called.at 
context.callback (E:\Bookmarkify-React\node_modules\loader- 
runner\lib\LoaderRunner.js:106:10)
    at processTicksAndRejections (node:internal/process/task_queues:95:5) Error: 
callback(): The callback was already called.
    at context.callback (E:\Bookmarkify-React\node_modules\loader- 
runner\lib\LoaderRunner.js:106:10)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
Note: This command was run via npm module 'win-node-env'
ERROR: "build:contentscript-background" exited with 1.

项目配置文件 #

package.json 脚本配置 #

"scripts": {
  "clean": "rm -rf dist && cpy manifest.json dist && cpy src/assets/* dist/assets",
  "prebuild": "npm run clean",
  "build:contentscript-background": "NODE_ENV=production webpack --config webpack.config.js",
  "build:popup": "INLINE_RUNTIME_CHUNK=false npm run build --prefix src/popup && cd src/popup/build && cpy * /static/* ../../../dist/popup --parents",
  "build:options": "INLINE_RUNTIME_CHUNK=false npm run build --prefix src/options && cd src/options/build && cpy * /static/* ../../../dist/options --parents",
  "build": "npm-run-all build:*",
  "prewatch": "npm run clean",
  "watch:contentscript-background": "NODE_ENV=development webpack --config webpack.config.js -w",
  "watch:popup": "npm run watch:build --prefix src/popup",
  "watch:options": "npm run watch:build --prefix src/options",
  "watch": "npm-run-all --parallel watch:* build:*",
  "zip": "bestzip extension.zip dist/*"
}

webpack.config.js 配置 #

const { CheckerPlugin } = require('awesome-typescript-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { optimize } = require('webpack');
const { join } = require('path');
let prodPlugins = [];

if (process.env.NODE_ENV === 'production') {
  prodPlugins.push(
    new optimize.AggressiveMergingPlugin(),
    new optimize.OccurrenceOrderPlugin()
  );
}

module.exports = {
  mode: process.env.NODE_ENV,
  devtool: 'inline-source-map',
  entry: {
    contentscript: join(__dirname, 'src/contentscript/contentscript.ts'),
    background: join(__dirname, 'src/background/background.ts'),
  },
  output: {
    path: join(__dirname, 'dist'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        exclude: /node_modules/,
        test: /\.ts?$/,
        use: 'awesome-typescript-loader?{configFileName: "tsconfig.json"}',
      },
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new CheckerPlugin(),
    ...prodPlugins,
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

tsconfig.json 配置 #

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": false,
    "types": ["chrome", "node"],
    "typeRoots": ["node_modules/@types"],
    "moduleResolution": "node",
    "lib": ["ES2021.String", "dom"]
  },
  "include": ["src/background", "src/contentscript"]
}

解决方案 #

1. 替换过时的TypeScript Loader #

awesome-typescript-loader已停止维护，与TypeScript 5.x兼容性差，是触发Windows下回调重复调用的核心原因。换成官方维护的ts-loader：

• 安装依赖：

  npm install ts-loader --save-dev
  

• 修改webpack.config.js中的TypeScript规则：

  {
    exclude: /node_modules/,
    test: /\.ts?$/,
    use: 'ts-loader'
  }
  

• 删除CheckerPlugin相关代码：移除顶部的const { CheckerPlugin } = require('awesome-typescript-loader');，以及plugins数组中的new CheckerPlugin()。

2. 修复跨平台脚本兼容性 #

Windows不支持rm -rf等Shell命令，同时环境变量设置方式与macOS不同：

• 安装跨平台工具：

  npm install cross-env rimraf --save-dev
  

• 修改package.json中的scripts：

  "clean": "rimraf dist && cpy manifest.json dist && cpy src/assets/* dist/assets",
  "build:contentscript-background": "cross-env NODE_ENV=production webpack --config webpack.config.js",
  

3. 移除废弃的Webpack插件 #

optimize.AggressiveMergingPlugin和optimize.OccurrenceOrderPlugin在Webpack 4+中已被废弃，Webpack会根据mode自动处理优化逻辑，直接删除相关代码：

• 删除以下代码块：

  let prodPlugins = [];
  if (process.env.NODE_ENV === 'production') {
    prodPlugins.push(
      new optimize.AggressiveMergingPlugin(),
      new optimize.OccurrenceOrderPlugin()
    );
  }
  

• 修改plugins数组，去掉...prodPlugins：

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  

4. 清理依赖并重新安装 #

Windows下可能存在依赖缓存或文件权限问题，执行以下命令重置依赖：

# Windows环境用以下命令
rmdir /s /q node_modules
del package-lock.json
npm install

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