Angular 13构建报错：Cannot set properties of undefined (setting 'kind')

报错信息示例 #

TypeError: C:\Users\c\dev\privacy\node_modules\@fortawesome\angular-fontawesome\fesm2020\angular-fontawesome.mjs: Cannot set properties of undefined (setting 'kind')

./node_modules/primeng/fesm2020/primeng-api.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
TypeError: C:\Users\c\dev\privacy\node_modules\primeng\fesm2020\primeng-api.mjs: Cannot set properties of undefined (setting 'kind')

解决方案步骤 #

• 锁定Babel依赖版本
  该错误源于Babel新版本（7.22+）与Angular 13构建工具的兼容性冲突，需锁定兼容的Babel版本：

  1. 在package.json中添加resolutions字段：

     "resolutions": {
       "@babel/core": "7.17.0",
       "@babel/generator": "7.17.0",
       "@babel/parser": "7.17.0",
       "@babel/traverse": "7.17.0",
       "@babel/types": "7.17.0"
     }
     

  2. 若使用npm，先安装强制解析工具：npm install -g npm-force-resolutions，再执行npm install；若使用yarn，直接执行yarn install。

• 清理缓存并重装依赖

  1. 删除本地依赖文件：

     rm -rf node_modules package-lock.json
     

  2. 重新安装依赖：npm install

• 确保Angular CLI与框架版本匹配

  1. 检查当前版本：ng version
  2. 若CLI版本与Angular 13不匹配，安装对应稳定版CLI：npm install @angular/cli@13.3.11 -g

• 切换回Webpack构建器（若启用ESBuild）
  Angular 13部分版本默认启用ESBuild，可能与第三方库冲突，修改angular.json中的构建器：

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      // 保留其他原有配置
    }
  }
  

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