I have a large project that I upgraded to nx.js 14, it is basically a Nest.js backend, 3 Angular 14 apps, a UI Library, a Model Library and it also supports CAPACITOR for the mobile versions of one of the Angular App.
When compiling the nest.js project I get the following error:
chunk (runtime: main) main.js (main) 391 KiB (javascript) 937 bytes (runtime) [entry] [rendered]
webpack compiled successfully (964121f2aac59057)
Debugger listening on ws://localhost:9229/8a3004b3-4c99-46d7-a548-4708fb498474
Debugger listening on ws://localhost:9229/8a3004b3-4c99-46d7-a548-4708fb498474
For help, see: https://nodejs.org/en/docs/inspector
/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/node_modules/@nrwl/node/src/executors/node/node-with-require-overrides.js:16
return originalLoader.apply(this, arguments);
^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/node_modules/@angular/common/fesm2015/common.mjs not supported.
Instead change the require of /Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/node_modules/@angular/common/fesm2015/common.mjs to a dynamic import() which is available in all CommonJS modules.
at Function.Module._load (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/node_modules/@nrwl/node/src/executors/node/node-with-require-overrides.js:16:31)
at Object.@angular/common (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:10631:18)
at __webpack_require__ (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:10809:41)
at Object../apps/c4g-api/src/services/bank/bank.service.ts (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:3744:73)
at __webpack_require__ (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:10809:41)
at Object../apps/c4g-api/src/services/admin/admin.service.ts (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:3353:76)
at __webpack_require__ (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:10809:41)
at Object../apps/c4g-api/src/controllers/profiles/care-seeker-profile/care-seeker-profile.controller.ts (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:2284:87)
at __webpack_require__ (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:10809:41)
at Object../apps/c4g-api/src/app.module.ts (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:63:131)
at __webpack_require__ (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:10809:41)
at /Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:10863:69
at /Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:10881:3
at Object.<anonymous> (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/dist/apps/c4g-api/main.js:10886:12)
at Function.Module._load (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/node_modules/@nrwl/node/src/executors/node/node-with-require-overrides.js:16:31)
at Object.<anonymous> (/Users/yannickdesjardins/Documents/GitHub/nx-c4g/nx-c4g/node_modules/@nrwl/node/src/executors/node/node-with-require-overrides.js:19:1)
However, I am not using require() anywhere. I am a bit stomped.
Here is my package.json
{
"name": "nx-c4g",
"version": "1.6.0",
"license": "MIT",
"scripts": {
"ng": "nx",
"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2018 browser module main --first-only --create-ivy-entry-points",
"nx": "nx",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "nx workspace-lint && ng lint",
"e2e": "ng e2e",
"affected:apps": "nx affected:apps",
"affected:libs": "nx affected:libs",
"affected:build": "nx affected:build",
"affected:e2e": "nx affected:e2e",
"affected:test": "nx affected:test",
"affected:lint": "nx affected:lint",
"affected:dep-graph": "nx affected:dep-graph",
"affected": "nx affected",
"format": "nx format:write",
"format:write": "nx format:write",
"format:check": "nx format:check",
"update": "nx migrate latest",
"workspace-generator": "nx workspace-generator",
"dep-graph": "nx dep-graph",
"help": "nx help"
},
"private": true,
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@alyle/ui": "13.2.2",
"@angular-eslint/schematics": "14.0.2",
"@angular-material-components/datetime-picker": "6.0.3",
"@angular/animations": "14.1.0",
"@angular/cdk": "14.1.0",
"@angular/common": "14.1.0",
"@angular/compiler": "14.1.0",
"@angular/core": "14.1.0",
"@angular/fire": "^6.1.4",
"@angular/flex-layout": "14.0.0-beta.40",
"@angular/forms": "14.1.0",
"@angular/localize": "14.1.0",
"@angular/material": "14.1.0",
"@angular/platform-browser": "14.1.0",
"@angular/platform-browser-dynamic": "14.1.0",
"@angular/router": "14.1.0",
"@angular/service-worker": "14.1.0",
"@capacitor/camera": "^1.3.1",
"@capacitor/core": "^3.6.0",
"@capacitor/geolocation": "^1.3.1",
"@fortawesome/angular-fontawesome": "^0.9.0",
"@fortawesome/fontawesome-pro": "6.1.1",
"@fortawesome/fontawesome-svg-core": "6.1.1",
"@fortawesome/pro-duotone-svg-icons": "6.1.1",
"@fortawesome/pro-light-svg-icons": "6.1.1",
"@fortawesome/pro-regular-svg-icons": "6.1.1",
"@fortawesome/pro-solid-svg-icons": "6.1.1",
"@google-cloud/firestore": "latest",
"@google-cloud/logging-bunyan": "4.1.1",
"@google-cloud/storage": "latest",
"@googlemaps/google-maps-services-js": "^3.1.16",
"@grpc/grpc-js": "1.6.7",
"@nestjs/axios": "^0.1.0",
"@nestjs/common": "^9.0.5",
"@nestjs/config": "2.2.0",
"@nestjs/core": "^9.0.5",
"@nestjs/passport": "^9.0.0",
"@nestjs/platform-express": "^9.0.5",
"@ng-idle/core": "11.1.0",
"@ng-idle/keepalive": "11.0.3",
"@ngrx/effects": "14.0.2",
"@ngrx/schematics": "14.0.2",
"@ngrx/store": "14.0.2",
"@ngrx/store-devtools": "14.0.2",
"@ngx-translate/core": "14.0.0",
"@ngx-translate/http-loader": "7.0.0",
"@nrwl/angular": "14.4.3",
"@nrwl/next": "^14.4.3",
"@nxtend/capacitor": "13.0.0",
"@schematics/angular": "^14.1.0",
"@sendgrid/mail": "^7.4.4",
"@stripe/stripe-js": "^1.15.0",
"@types/google.maps": "latest",
"bunyan": "^1.8.15",
"core-js": "^3.23.5",
"debug": "^4.3.2",
"devextreme": "21.1.3",
"devextreme-angular": "21.1.3",
"devextreme-schematics": "^1.2.15",
"firebase": "7.24.0",
"firebase-admin": "^9.8.0",
"geolib": "^3.3.1",
"gm": "latest",
"guid-typescript": "^1.0.9",
"hammerjs": "^2.0.8",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"moment-range": "^4.0.2",
"mongodb": "^3.6.7",
"nanoid": "^3.1.23",
"nestjs-command": "latest",
"nestjs-stripe": "^0.4.1",
"ngx-device-detector": "^2.0.10",
"ngx-input-file": "10.2.0",
"ngx-perfect-scrollbar": "10.1.1",
"ngx-progressbar": "^6.1.1",
"ngx-swiper-wrapper": "^10.0.0",
"passport": "^0.4.1",
"passport-http-bearer": "^1.0.1",
"pusher": "^5.0.0",
"pusher-js": "^7.0.3",
"reflect-metadata": "^0.1.13",
"rimraf": "latest",
"rrule": "^2.6.6",
"rxjs": "~7.5.6",
"stream": "^0.0.2",
"stripe": "^8.148.0",
"swiper": "^6.6.1",
"tslib": "^2.4.0",
"zone.js": "^0.11.7"
},
"devDependencies": {
"@angular-devkit/build-angular": "14.1.0",
"@angular-eslint/eslint-plugin": "14.0.2",
"@angular-eslint/eslint-plugin-template": "14.0.2",
"@angular-eslint/template-parser": "^4.3.1",
"@angular/cli": "14.1.0",
"@angular/compiler-cli": "14.1.0",
"@angular/language-service": "14.1.0",
"@capacitor/android": "^3.6.0",
"@capacitor/cli": "^3.6.0",
"@capacitor/ios": "^3.6.0",
"@nestjs/schematics": "^9.0.1",
"@nestjs/testing": "^9.0.5",
"@nrwl/angular": "14.4.3",
"@nrwl/cli": "^14.4.3",
"@nrwl/cypress": "14.4.3",
"@nrwl/eslint-plugin-nx": "14.4.3",
"@nrwl/jest": "14.4.3",
"@nrwl/linter": "14.4.3",
"@nrwl/nest": "^14.4.3",
"@nrwl/node": "14.4.3",
"@nrwl/tao": "^14.4.3",
"@nrwl/workspace": "^14.4.3",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "^2.0.8",
"@types/jest": "26.0.8",
"@types/stripe-checkout": "^1.0.3",
"@types/stripe-v3": "^3.1.19",
"@typescript-eslint/eslint-plugin": "4.19.0",
"@typescript-eslint/parser": "4.19.0",
"codelyzer": "^6.0.1",
"copy-webpack-plugin": "^7.0.0",
"cypress": "^6.0.1",
"devextreme-cli": "^1.2.0",
"devextreme-themebuilder": "^20.2.5",
"dotenv": "8.2.0",
"eslint": "7.22.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"jest": "26.2.2",
"jest-preset-angular": "8.4.0",
"ng-packagr": "12.2.7",
"prettier": "2.2.1",
"protractor": "^7.0.0",
"ts-jest": "26.5.5",
"ts-node": "~9.1.1",
"typescript": "^4.3.5"
}
}
And my nx report
> NX Report complete - copy this into the issue template
Node : 16.16.0
OS : darwin x64
npm : 6.14.12
nx : 14.4.3
@nrwl/angular : 14.4.3
@nrwl/cypress : 14.4.3
@nrwl/detox : Not Found
@nrwl/devkit : 14.4.3
@nrwl/eslint-plugin-nx : 14.4.3
@nrwl/express : Not Found
@nrwl/jest : 14.4.3
@nrwl/js : 14.4.3
@nrwl/linter : 14.4.3
@nrwl/nest : 14.4.3
@nrwl/next : 14.4.3
@nrwl/node : 14.4.3
@nrwl/nx-cloud : Not Found
@nrwl/nx-plugin : Not Found
@nrwl/react : 14.4.3
@nrwl/react-native : Not Found
@nrwl/schematics : Not Found
@nrwl/storybook : 14.4.3
@nrwl/web : 14.4.3
@nrwl/workspace : 14.4.3
typescript : 4.7.4
---------------------------------------
Community plugins:
@alyle/ui: 13.2.2
@fortawesome/angular-fontawesome: 0.9.0
@ngrx/effects: 14.0.2
@ngrx/schematics: 14.0.2
@ngrx/store: 14.0.2
@ngrx/store-devtools: 14.0.2
@nxtend/capacitor: 13.0.0
devextreme-angular: 21.1.3
devextreme-schematics: 1.4.2
2
Answers
I found the problem, in my nest.js backend, I was using CurrencyPipe to do some currency formatting, which is from @angular/common when in fact I should have been using
Intl.NumberFormatI have the same issue for me the problem is a bad auto import on a NestJs service:
Instead of: