升级至Webpack 5.79.0后NX Angular项目构建失败求助

错误原因 #

Webpack 5.79.0升级了内置的acorn解析器，而Angular 15.2.6对应的@angular-devkit/build-angular中的babel-loader依赖的acorn方法destructuringAssignmentPropertiesFor在新版本acorn中已被移除，导致模块解析失败。

解决方案 #

方案1：降级Webpack到5.78.0 #

• 在项目根目录的package.json中锁定webpack版本：

"devDependencies": {
  "webpack": "5.78.0"
}

• 重新安装依赖：

npm install
# 或使用yarn
yarn install

方案2：升级Angular工具链到兼容版本 #

Angular 15的后续补丁版本已适配Webpack 5.79.0，执行以下命令升级：

nx migrate angular@15.2.x
# 或使用Angular CLI
ng update @angular/core@15 @angular/cli@15 --force

• 安装更新后的依赖：

npm install

方案3：锁定acorn到兼容版本 #

手动将acorn版本锁定为Webpack 5.78.0使用的8.8.2版本：

• npm用户：
  先安装依赖锁定工具，再添加版本锁定配置：

"devDependencies": {
  "npm-force-resolutions": "^0.0.10"
},
"scripts": {
  "preinstall": "npx npm-force-resolutions"
},
"resolutions": {
  "acorn": "8.8.2"
}

• yarn用户：
  直接在package.json中添加：

"resolutions": {
  "acorn": "8.8.2"
}

• 重新安装依赖：

npm install
# 或yarn
yarn install

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