'Webpack error after upgrading to Angular 10

I just performed an upgrade from Angular 6 to Angular 10 for our application. I have gone through various component and module TypeScript files, and have fixed any imports that became outdated, and weren't mapping correctly.

I kept getting an error when I would run ng serve that would say the following:

ERROR in Cannot read property '0' of undefined

This would usually hang up in the terminal for a moment, then output file-specific errors underneath it.

I would fix those errors. Once it quit giving me them, I still get the same above error, with nothing underneath it. Something I did notice is that most errors involve angular dependencies transitioning from em2015 to esm2015.

I can run ng serve --verbose=true and get some additional output. It appears that something in webpack is hanging up the build process.

I have experienced numerous problems with @angular/dev-kit before and thought I could be experiencing more. I went ahead and did a clean uninstall re-install. Nothing different.

When I upgraded all dependencies in the application, I uninstalled everything, deleted the node_modules folder, force cleaned cache, and reinstalled everything.

Does anyone have any idea of what can be causing webpack to fail? I have attached my package.json, and the output of ng serve --verbose=true.

{
  "name": "ng-cosm-crm",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@ag-grid-community/angular": "^23.2.1",
    "@ag-grid-enterprise/all-modules": "^23.2.1",
    "@angular-devkit/schematics": "^10.0.8",
    "@angular/animations": "^10.0.14",
    "@angular/cdk": "^10.1.3",
    "@angular/cli": "^10.0.8",
    "@angular/common": "^10.0.14",
    "@angular/compiler": "^10.0.14",
    "@angular/core": "^10.0.14",
    "@angular/forms": "^10.0.14",
    "@angular/material": "^10.1.3",
    "@angular/platform-browser": "^10.0.14",
    "@angular/platform-browser-dynamic": "^10.0.14",
    "@angular/platform-server": "^10.0.14",
    "@angular/router": "^10.0.14",
    "@angular/service-worker": "^10.0.14",
    "@fullcalendar/core": "^5.3.0",
    "accounting-js": "^1.1.1",
    "ag-grid": "^18.1.2",
    "ag-grid-angular": "^23.2.1",
    "ag-grid-community": "^23.2.1",
    "ag-grid-enterprise": "^23.2.1",
    "angular-2-local-storage": "^3.0.2",
    "angular-file-saver": "^1.1.3",
    "angular2-indexeddb": "^1.2.3",
    "angular2-logger": "^0.7.0",
    "angular2-multiselect-dropdown": "^4.6.3",
    "angular2-tinymce": "^3.3.0",
    "angular2-uuid": "^1.1.1",
    "barcode-scanner": "0.0.2",
    "blend4web": "^18.5.0",
    "bootstrap": "^4.5.2",
    "bootstrap-select": "^1.13.18",
    "chart.js": "^2.9.3",
    "core-js": "^3.6.5",
    "currency-formatter": "^1.5.6",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "json-schema": "^0.2.5",
    "json-stringify-safe": "^5.0.1",
    "jspdf": "^2.1.0",
    "jspdf-autotable": "^3.5.9",
    "latest-version": "^5.1.0",
    "lodash.isequal": "^4.5.0",
    "mdbootstrap": "~4.19.1",
    "moment": "^2.27.0",
    "moment-timezone": "^0.5.31",
    "ng-connection-service": "^1.0.4",
    "ng2-cache": "^0.2.1",
    "ng2-carouselamos": "^4.1.0",
    "ng2-chosen": "0.0.2-beta5",
    "ng2-select": "^2.0.0",
    "ngx-device-detector": "2.0.0",
    "ngx-hm-carousel": "^1.7.2",
    "ngx-mask": "^10.0.1",
    "node-gyp": "^7.1.0",
    "pdfmake": "^0.1.68",
    "pngjs3": "^5.1.10",
    "primeng": "^9.1.3",
    "quagga": "^0.12.1",
    "quill": "^1.3.7",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "6.6.2",
    "rxjs-compat": "6.6.2",
    "tinymce": "^5.4.2",
    "tslib": "^2.0.1",
    "userpilot": "^1.1.7",
    "xlsx": "^0.16.6",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.8",
    "@angular/compiler-cli": "^10.0.14",
    "@types/jasmine": "3.5.14",
    "@types/node": "^14.6.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.2",
    "karma": "~5.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~7.0.0",
    "ts-node": "~9.0.0",
    "tslint": "~6.1.3",
    "typescript": "^3.9.6",
    "webpack": "^4.44.1"
  }
}

I am running Node version 12.18.3 and NPM 6.14.6



Sources

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

Source: Stack Overflow

Solution Source