新机器运行Webpack抛出TypeError异常的解决方法

问题背景 #

这是一个基于Aurelia 1.0、Webpack 2.6.1的近10年历史旧项目，后端依赖.NET Framework 4.8.0，在Visual Studio 2022中通过Task Runner Explorer运行Webpack。项目在本地机器运行正常，但另一开发者配置完全一致的环境后，始终抛出异常。

报错信息 #

C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE> cmd /c SET NODE_ENV=development&& webpack --color
C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\lib\FlagDependencyUsagePlugin.js:56
                    const oldUsed = module.used;
                                           ^
TypeError: Cannot read properties of null (reading 'used')
    at processDependency (C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\lib\FlagDependencyUsagePlugin.js:56:29)
    at C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\lib\FlagDependencyUsagePlugin.js:46:43
    at Array.forEach (<anonymous>)
    at processDependenciesBlock (C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\lib\FlagDependencyUsagePlugin.js:46:28)
    at Compilation.<anonymous> (C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\lib\FlagDependencyUsagePlugin.js:23:6)
    at Compilation.applyPluginsBailResult1 (C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\node_modules\tapable\lib\Tapable.js:140:27)
    at Compilation.seal (C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\lib\Compilation.js:571:9)
    at C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\lib\Compiler.js:493:16
    at C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\node_modules\tapable\lib\Tapable.js:289:11
    at C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\lib\Compilation.js:481:11
    at C:\Dev\azure.dev.com\CSS.CRM.Jackpot\OE\node_modules\webpack\lib\Compilation.js:452:13
    at processTicksAndRejections (node:internal/process/task_queues:78:11)
Process terminated with code 1.

抛出异常的Webpack源码片段 #

function processDependency(dep) {
                const reference = dep.getReference && dep.getReference();
                if(!reference) return;
                const module = reference.module;
                const importedNames = reference.importedNames;
                const oldUsed = module.used;
                const oldUsedExports = module.usedExports;
                if(!oldUsed || (importedNames && (!oldUsedExports || !isSubset(oldUsedExports, importedNames)))) {
                    processModule(module, importedNames);
                }
            }

已尝试操作 #

• 通过webpack-cli运行，报错信息完全一致
• 以管理员身份运行，报错无变化

解决建议 #

1. 彻底清理并重装依赖 #

• 删除项目根目录的node_modules文件夹
• 删除package-lock.json文件
• 执行npm install重新安装所有依赖
• 运行Webpack时添加--no-cache参数，或手动删除node_modules/.cache/webpack缓存目录

2. 核查文件系统与配置一致性 #

• 确认两台机器的项目文件完全同步，重点检查webpack.config.js及相关配置文件无遗漏或修改
• 检查项目路径是否包含特殊字符（如空格、中文），避免路径解析异常
• 排查文件名大小写问题：虽然Windows默认不区分大小写，但Webpack模块查找可能因大小写不一致导致解析失败

3. 确认Node.js版本完全匹配 #

• 运行node -v对比两台机器的Node.js版本，确保主版本和次版本完全一致（Webpack 2.6.1建议使用Node.js 6.x及以上版本）
• 若Visual Studio使用内置Node.js，需在Tools > Options > Projects and Solutions > Web Package Management > External Web Tools中调整路径优先级，确保使用系统全局的匹配版本

4. 临时禁用FlagDependencyUsagePlugin验证 #

• 在Webpack配置中注释或移除FlagDependencyUsagePlugin：

  // webpack.config.js
  module.exports = {
    // ...其他配置项
    plugins: [
      // new webpack.optimize.FlagDependencyUsagePlugin()  // 注释此行
    ]
  };
  

• 若禁用后编译正常，说明该插件存在环境兼容性问题，可考虑保留禁用，或升级Webpack至2.x系列最新补丁版本（如2.7.0）尝试修复bug

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