'Angular 13 Webpack Exception: TypeError: Cannot read properties of undefined (reading 'NODE_DEBUG')

After upgrading to Angular 13 the application no longer works during runtime. From what I've read NODE_DEBUG is Webpack specific and for some reason is not recognized when running the application with an 'ng serve'. I've also recently upgraded to macOS Monterey. I've very stuck at the moment....

package.json

{
    "dependencies": {
    "@angular-devkit/schematics": "^13.1.2",
    "@angular/animations": "~13.1.1",
    "@angular/cdk": "^13.1.0",
    "@angular/common": "~13.1.1",
    "@angular/compiler": "~13.1.1",
    "@angular/core": "~13.1.1",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "~13.1.1",
    "@angular/material": "^13.1.0",
    "@angular/platform-browser": "~13.1.1",
    "@angular/platform-browser-dynamic": "~13.1.1",
    "@angular/router": "~13.1.1",
    "@angular/service-worker": "~13.1.1",
    "@costlydeveloper/ngx-awesome-popup": "^2.2.0",
    "@types/uuid": "^8.3.0",
    "buffer": "^6.0.3",
    "crypto-js": "^4.1.1",
    "firebase": "9.6.1",
    "jsonwebtoken": "^8.5.1",
    "jsstore": "4.3.6",
    "ngx-currency": "^2.5.2",
    "ramda": "^0.27.1",
    "rxjs": "~6.6.7",
    "service": "^0.1.4",
    "stream-browserify": "^3.0.0",
    "tslib": "^2.3.1",
    "util": "^0.12.4",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/architect": "0.1301.2",
    "@angular-devkit/build-angular": "^13.1.2",
    "@angular/cli": "~13.1.2",
    "@angular/compiler-cli": "~13.1.1",
    "@types/crypto-js": "^4.0.2",
    "@types/jasmine": "~3.6.0",
    "@types/jsonwebtoken": "8.5.4",
    "@types/node": "^16.11.2",
    "@types/ramda": "0.27.60",
    "codelyzer": "^6.0.2",
    "firebase-tools": "~9.23.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^8.2.0",
    "inquirer-autocomplete-prompt": "^1.4.0",
    "jasmine-core": "~3.10.1",
    "jasmine-spec-reporter": "~7.0.0",
    "jsonc-parser": "^3.0.0",
    "karma": "~6.3.9",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "open": "^8.4.0",
    "protractor": "~7.0.0",
    "ts-node": "~10.4.0",
    "tslint": "~6.1.3",
    "typescript": "~4.5.3"
}

Error:

enter image description here

node.jsangularwebpack


Solution 1:[1]

After comparing my Angular.json with a brand new Angular 13 app, I made updates so they matched in structure since ng update did not handle this effectively. That led me to a new error where I found the NODE_DEBUG was coming from utils.js which was a dependency of jsonwebtoken.

Solution 2:[2]

Try to delete your node_modules folder and run npm install again.

If still not working try to downgrade the node version to 12.20.x and check.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Dev Gourav

Related Questions