Vue项目无代码变更构建报ErrorStackParser.parse非函数错误

问题表现 #

• 首次热修复构建成功，无代码变更的情况下二次构建触发报错
• 同环境下所有配置相近的Vue项目构建均出现相同报错，多次修改代码、调整配置后问题仍存在
• 核心报错信息：

TypeError: ErrorStackParser.parse is not a function

• 完整错误调用栈：

ERROR  TypeError: ErrorStackParser.parse is not a function
TypeError: ErrorStackParser.parse is not a function
at getOriginalErrorStack (node_modules/@soda/friendly-errors-webpack-plugin/src/core/extractWebpackError.js:31:29)
at extractError (node_modules/@soda/friendly-errors-webpack-plugin/src/core/extractWebpackError.js:22:20)
at Array.map ()
at processErrors (node_modules/@soda/friendly-errors-webpack-plugin/src/core/transformErrors.js:31:17)
at FriendlyErrorsWebpackPlugin.displayErrors (node_modules/@soda/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:97:29)
at doneFn (node_modules/@soda/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:57:14)
at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), :18:1)
at AsyncSeriesHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)
at node_modules/webpack/lib/Compiler.js:304:22
at Compiler.emitRecords (node_modules/webpack/lib/Compiler.js:499:39)
at node_modules/webpack/lib/Compiler.js:298:10
at node_modules/webpack/lib/Compiler.js:485:14
at _next0 (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1)
at eval (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), :24:1)
at node_modules/copy-webpack-plugin/dist/index.js:115:7
at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), :20:1)

故障根因 #

报错触发点来自构建插件@soda/friendly-errors-webpack-plugin，其依赖的error-stack-parser包发布了3.x大版本，存在不兼容变更：新版不再导出顶层parse方法，改为默认导出实例对象，插件原有调用逻辑直接抛出类型错误。
由于该依赖未锁定版本，本地安装依赖时拉取到最新不兼容版本，加上包管理工具的缓存依赖污染，导致同环境下所有Vue项目均命中该问题，和业务代码、项目配置变更无关。

修复步骤 #

• 第一步：删除当前项目的node_modules目录，同时删除对应包锁文件（npm删package-lock.json、yarn删yarn.lock、pnpm删pnpm-lock.yaml）
• 第二步：根据使用的包管理工具，在package.json中添加配置强制锁定error-stack-parser到兼容版本2.1.4：
  • npm 8.3及以上版本添加overrides字段：

  {
    "overrides": {
      "error-stack-parser": "2.1.4"
    }
  }
  

  • yarn、pnpm添加resolutions字段：

  {
    "resolutions": {
      "error-stack-parser": "2.1.4"
    }
  }
  

• 第三步：清理包管理工具本地缓存：
  • npm执行 npm cache clean --force
  • yarn执行 yarn cache clean
  • pnpm执行 pnpm store prune
• 第四步：重新执行依赖安装命令，完成后再运行构建即可恢复正常。

临时快速修复：如果需要临时绕过问题，可直接进入项目node_modules/@soda/friendly-errors-webpack-plugin目录，执行npm install error-stack-parser@2.1.4，即可临时解决当前项目的报错，该方式不会持久化，重装依赖后问题会复现。

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