Angular项目编译后浏览器报module/require/exports未定义错误求助

问题背景 #

我是Angular和Node.js新手，使用Angular CLI 15构建单页应用，为完成编译做了以下操作：

• 安装angular-builders及browserified包并配置到extra-webpack.config.js
• 安装node-loader支持webpack读取:node scheme
• 在angular.json的allowedCommonJsDependencies中添加相关包消除警告

编译成功部署后，浏览器控制台出现以下错误：

require chunk loading:34 Uncaught ReferenceError: module is not defined
    at require chunk loading:34:1
    at require chunk loading:39:1
    at require chunk loading:39:1
zone.js:2803 Uncaught ReferenceError: require is not defined
    at zone.js:2803:3
    at zone.js:2803:3
vendor.js:1 Uncaught ReferenceError: exports is not defined
    at vendor.js:1:1
external node-commonjs "worker_threads":1 Uncaught ReferenceError: require is not defined
    at external node-commonjs "worker_threads":1:1
    at external node-commonjs "worker_threads":1:1

推测部分依赖使用CommonJS的require()导入，但浏览器期望ES模块，尝试用Babel+webpack转译无效，附上相关配置文件及环境信息：

配置文件 #

angular.json #

{  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  "version": 1,  "newProjectRoot": "projects",  "projects": {    "oap-erp": {      "projectType": "application",      "schematics": {},      "root": "",      "sourceRoot": "src",      "prefix": "app",      "architect": {        "build": {          "builder": "@angular-builders/custom-webpack:browser",          "options": {            "customWebpackConfig": {              "path": "./extra-webpack.config.js",              "mergeRules": {                "externals": "replace"              }            },            "allowedCommonJsDependencies": [              "jsonwebtoken",              "node-domexception",              "crypto",              "http",              "https",              "fs",              "rxjs"            ],            "outputPath": "dist/oap-erp",            "index": "src/index.html",            "main": "src/main.ts",            "polyfills": [              "zone.js"            ],            "tsConfig": "tsconfig.app.json",            "assets": [              "src/favicon.ico",              "src/assets"            ],            "styles": [              "src/styles.css"            ],            "scripts": []          },          "configurations": {            "production": {              "budgets": [                {                  "type": "initial",                  "maximumWarning": "500kb",                  "maximumError": "1mb"                },                {                  "type": "anyComponentStyle",                  "maximumWarning": "2kb",                  "maximumError": "4kb"                }              ],              "outputHashing": "all"            },            "development": {              "buildOptimizer": false,              "optimization": false,              "vendorChunk": true,              "extractLicenses": false,              "sourceMap": true,              "namedChunks": true            }          },          "defaultConfiguration": "production"        },        "serve": {          "builder": "@angular-builders/custom-webpack:dev-server",          "configurations": {            "production": {              "browserTarget": "oap-erp:build:production"            },            "development": {              "browserTarget": "oap-erp:build:development"            }          },          "defaultConfiguration": "development",          "options": {            "sslKey": "../certs/localhost.key",            "sslCert": "../certs/localhost.crt",            "ssl": true          }        },        "extract-i18n": {          "builder": "@angular-devkit/build-angular:extract-i18n",          "options": {            "browserTarget": "oap-erp:build"          }        },        "test": {          "builder": "@angular-devkit/build-angular:karma",          "options": {            "polyfills": [              "zone.js",              "zone.js/testing"            ],            "tsConfig": "tsconfig.spec.json",            "assets": [              "src/favicon.ico",              "src/assets"            ],            "styles": [              "src/styles.css"            ],            "scripts": []          }        }      }    }  }}

package.json #

{  "name": "oap-erp",  "version": "0.0.0",  "scripts": {    "ng": "ng",    "start": "ng serve",    "build": "ng build",    "watch": "ng build --watch --configuration development",    "test": "ng test"  },  "private": true,  "dependencies": {    "@angular-builders/custom-webpack": "^15.0.0-beta.0",    "@angular/animations": "^15.0.0",    "@angular/common": "^15.0.0",    "@angular/compiler": "^15.0.0",    "@angular/core": "^15.0.0",    "@angular/forms": "^15.0.0",    "@angular/platform-browser": "^15.0.0",    "@angular/platform-browser-dynamic": "^15.0.0",    "@angular/router": "^15.0.0",    "@pnp/nodejs": "^3.10.0",    "@pnp/sp": "^3.10.0",    "crypto-browserify": "^3.12.0",    "fs-web": "^1.0.1",    "https-browserify": "^1.0.0",    "rxjs": "~7.5.0",    "stream-browserify": "^3.0.0",    "stream-http": "^3.2.0",    "tslib": "^2.3.0",    "url": "^0.11.0",    "util": "^0.12.5",    "xlsx": "^0.18.5",    "zone.js": "~0.12.0"  },  "devDependencies": {    "@angular-devkit/build-angular": "^15.0.3",    "@angular/cli": "~15.0.3",    "@angular/compiler-cli": "^15.0.0",    "@types/jasmine": "~4.3.0",    "jasmine-core": "~4.5.0",    "karma": "~6.4.0",    "karma-chrome-launcher": "~3.1.0",    "karma-coverage": "~2.2.0",    "karma-jasmine": "~5.1.0",    "karma-jasmine-html-reporter": "~2.0.0",    "node-loader": "^2.0.0",    "typescript": "~4.8.2"  }}

tsconfig.json #

/* To learn more about this file see: https://angular.io/config/tsconfig. */{  "compileOnSave": false,  "compilerOptions": {    "baseUrl": "./",    "outDir": "./dist/out-tsc",    "forceConsistentCasingInFileNames": true,    "strict": true,    "noImplicitOverride": true,    "noPropertyAccessFromIndexSignature": true,    "noImplicitReturns": true,    "noFallthroughCasesInSwitch": true,    "sourceMap": true,    "declaration": false,    "downlevelIteration": true,    "experimentalDecorators": true,    "moduleResolution": "node",    "importHelpers": true,    "target": "ES2022",    "module": "ES2022",    "useDefineForClassFields": false,    "lib": [      "ES2022",      "dom"    ],    "skipLibCheck": true  },  "angularCompilerOptions": {    "enableI18nLegacyMessageIdFormat": false,    "strictInjectionParameters": true,    "strictInputAccessModifiers": true,    "strictTemplates": true  }}

extra-webpack.config.js #

module.exports = {    target: "node",    node: {        __dirname: false,    },    module: {        rules: [        {            test: /\.node$/,            loader: "node-loader",        },        ],    },    resolve: {        fallback: {            fs: require.resolve('fs-web'),            http: require.resolve('stream-http'),            https: require.resolve('https-browserify'),            crypto: require.resolve('crypto-browserify'),            url: require.resolve('url'),            stream: require.resolve('stream-browserify'),            util: require.resolve('util'),        },    },    // externalsPresets: { node: true }};

环境信息 #

Angular CLI: 15.0.3Node: 18.12.1Package Manager: npm 8.19.2OS: win32 x64Angular: 15.0.3... animations, cli, common, compiler, compiler-cli, core, forms... platform-browser, platform-browser-dynamic, routerPackage                         Version---------------------------------------------------------@angular-devkit/architect       0.1500.3@angular-devkit/build-angular   15.0.3@angular-devkit/core            15.0.3@angular-devkit/schematics      15.0.3@schematics/angular             15.0.3rxjs                            7.5.7typescript                      4.8.4

解决方案 #

1. 移除target: "node"配置
   extra-webpack.config.js中设置的target: "node"会让webpack生成Node.js环境的代码，浏览器不支持module、exports、require这类Node.js全局变量。删除该行，保持默认的浏览器target。

2. 移除@pnp/nodejs依赖
   @pnp/nodejs是Node.js专属包，无法在浏览器运行。如果需要调用SharePoint API，仅保留@pnp/sp，并改用浏览器端认证方式（如MSAL）替代Node.js认证逻辑。

3. 禁用worker_threads
   浏览器不支持worker_threads模块，在extra-webpack.config.js的resolve.fallback中添加配置：

   resolve: {
       fallback: {
           // ...其他fallback配置
           worker_threads: false,
       },
   }
   

4. 添加必要polyfill（可选）
   在src/polyfills.ts中添加以下代码，补充ES模块相关的全局变量：

   import 'core-js/es/module';
   import 'core-js/es/exports';
   

5. 更新allowedCommonJsDependencies
   将worker_threads添加到angular.json的allowedCommonJsDependencies数组中，消除相关编译警告。

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