如何修复Angular生产环境的Uncaught (in promise) Error: Minified React error #321

我基于Fuse模板构建的Angular 13应用，在生产环境中出现React is not defined相关错误。我推测是某个依赖库基于React构建引发了冲突，但无法确定具体是哪个库。

以下是我的package.json配置：

{
  "dependencies": {
    "@agm/core": "1.1.0",
    "@angular/animations": "^13.3.11",
    "@angular/cdk": "^13.3.9",
    "@angular/common": "13.3.11",
    "@angular/compiler": "13.3.11",
    "@angular/core": "13.3.11",
    "@angular/flex-layout": "10.0.0-beta.32",
    "@angular/forms": "13.3.11",
    "@angular/material": "13.3.9",
    "@angular/material-moment-adapter": "13.3.9",
    "@angular/platform-browser": "13.3.11",
    "@angular/platform-browser-dynamic": "13.3.11",
    "@angular/router": "13.3.11",
    "@fortawesome/angular-fontawesome": "0.6.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-regular-svg-icons": "5.15.1",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@ng-select/ng-option-highlight": "^0.0.7",
    "@ng-select/ng-select": "4.0.4",
    "@ngrx/effects": "8.6.0",
    "@ngrx/router-store": "8.6.0",
    "@ngrx/store": "8.6.0",
    "@ngrx/store-devtools": "8.6.0",
    "@ngx-translate/core": "13.0.0",
    "@sweetalert2/ngx-sweetalert2": "^5.0.3",
    "@swimlane/dragula": "3.8.0",
    "@swimlane/ngx-charts": "^14.0.0",
    "@swimlane/ngx-datatable": "17.1.0",
    "@swimlane/ngx-dnd": "8.1.2",
    "@types/prismjs": "1.16.1",
    "angular-barcode-listener": "^3.0.0",
    "angular-calendar": "0.28.16",
    "angular-in-memory-web-api": "0.11.0",
    "angular2-text-mask": "9.0.0",
    "apexcharts": "^3.35.3",
    "chart.js": "^2.9.4",
    "d3": "5.16.0",
    "date-fns": "2.15.0",
    "exceljs": "^4.2.1",
    "file-saver": "^1.3.8",
    "html2pdf.js": "^0.10.1",
    "intl-tel-input": "^17.0.16",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
    "net": "^1.0.2",
    "ng-apexcharts": "^1.7.1",
    "ng-http-loader": "8.0.0",
    "ng2-charts": "2.3.2",
    "ng2-tel-input": "^2.3.0",
    "ngrx-store-freeze": "0.2.4",
    "ngx-color-picker": "9.1.0",
    "ngx-cookie-service": "3.1.2",
    "ngx-image-cropper": "^5.0.1",
    "ngx-infinite-scroll": "^10.0.1",
    "ngx-mat-select-search": "^3.3.3",
    "ngx-pagination": "^5.1.1",
    "ngx-print": "^1.2.1",
    "perfect-scrollbar": "1.5.0",
    "prettier": "^2.6.2",
    "pretty-quick": "^3.1.3",
    "prismjs": "^1.29.0",
    "rxjs": "6.6.0",
    "sockjs-client": "^1.6.1",
    "stompjs": "^2.3.3",
    "sweetalert2": "^8.5.0",
    "tslib": "^2.4.0",
    "tslint-sonarts": "^1.9.0",
    "utils-decorators": "^2.0.4",
    "written-number": "^0.11.1",
    "xlsx": "^0.17.5",
    "zone.js": "0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.3.8",
    "@angular/cli": "^13.3.8",
    "@angular/compiler-cli": "^13.3.11",
    "@angular/language-service": "^13.3.11",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "2.0.8",
    "@types/lodash": "4.14.149",
    "@types/node": "12.12.6",
    "codelyzer": "^0.0.28",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.4.0",
    "karma-chrome-launcher": "^3.1.1",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "^4.0.2",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "7.0.0",
    "ts-node": "8.3.0",
    "tslint": "6.1.2",
    "typescript": "4.6.4",
    "webpack-bundle-analyzer": "^4.6.1"
  }
}

排查与解决建议 #

1. 快速定位React来源 #

执行以下命令直接找出哪个依赖引入了React：

• npm用户：npm ls react
• yarn用户：yarn why react

命令会输出完整的依赖树，明确显示React是被哪个库间接引入的。

2. 分析生产构建包 #

利用已安装的webpack-bundle-analyzer检查打包内容：

1. 生成构建统计文件：ng build --prod --stats-json
2. 启动分析面板：npx webpack-bundle-analyzer dist/[你的项目名称]/stats.json
3. 在面板中搜索"react"，查看相关模块的来源。

3. 逐个验证可疑库 #

从依赖列表看，以下几个库有引入React的风险，可临时移除后重新构建验证：

• @swimlane/ngx-charts：部分早期版本依赖React相关组件，可尝试降级到适配Angular 13的稳定版
• apexcharts/ng-apexcharts：确认当前版本是否与Angular 13兼容，尝试升级或降级

4. 修复全局React缺失问题 #

如果必须保留包含React的依赖，可手动引入React全局变量：

1. 安装React依赖：npm install react react-dom --save
2. 在angular.json的build.options.scripts中添加：

"scripts": [
  "./node_modules/react/umd/react.production.min.js",
  "./node_modules/react-dom/umd/react-dom.production.min.js"
]

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