Angular build: Cannot read property 'split' of undefined

user_423649 0
Viewed 4183

just upgraded from ng8 to ng11. when I run ng serve it works fine, but when I run build for production I get the following error:

Generating ES5 bundles for differential loading... An unhandled exception occurred: C:\P.....\src\app\9-es2015.dce42a686e45767441f2.js: Cannot read property 'split' of undefined

I tried removing code to see what is causing the issue and I found the following code in my component, I change the enum to a hardcoded number it works, or if I remove the console.log. it seems it's an issue with es2015, changing to es5 solves it.

import {FormTableData} from '../../../form/service/type/form-table-data';
import {FormFieldTypes} from '../../../form/service/type/form-field-types.enum';

export class FormEditorFormData {

  formData: FormTableData;
  fieldType = FormFieldTypes;
  arr: string[];


  constructor(n: number,s:string) {
    let type = 0;
    const option: string[] = [];
    for (const s of this.arr) {
      if (s != null) {
        switch (type) {
          case FormFieldTypes.checkbox:
            const cap = 'pp';
            option.forEach( (currentValue) => {
              console.log(cap);
            });
            break;
        }
      }
    }
  }
}

FormFieldTypes:

 export enum FormFieldTypes {
  text = 10,
  checkbox = 20,
  numeric = 30,
  option = 40,
  date = 50,
  combo = 60,
  xiny = 70,
  file = 80,
  picture = 90,
  break = 100,
  textArea = 110,
  actionButton = 998,
  none = 999
}

error log:

[error] TypeError: C:\Projects\Venditio\admin-client\src\app\9-es2015.8205fce0935da26db9bb.js: Cannot read property 'split' of undefined
    at NodePath.get (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\family.js:185:21)
    at BlockScoping.wrapClosure (C:\Projects\Venditio\admin-client\node_modules\@babel\plugin-transform-block-scoping\lib\index.js:534:29)
    at BlockScoping.run (C:\Projects\Venditio\admin-client\node_modules\@babel\plugin-transform-block-scoping\lib\index.js:360:12)
    at PluginPass.BlockStatement|SwitchStatement|Program (C:\Projects\Venditio\admin-client\node_modules\@babel\plugin-transform-block-scoping\lib\index.js:89:24)
    at newFn (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\visitors.js:175:21)
    at NodePath._call (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:55:20)
    at NodePath.call (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:42:17)
    at NodePath.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:92:31)
    at TraversalContext.visitQueue (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:116:16)
    at TraversalContext.visitSingle (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:85:19)
    at TraversalContext.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:144:19)
    at Function.traverse.node (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\index.js:82:17)
    at NodePath.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\path\context.js:99:18)
    at TraversalContext.visitQueue (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:116:16)
    at TraversalContext.visitMultiple (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:80:17)
    at TraversalContext.visit (C:\Projects\Venditio\admin-client\node_modules\@babel\traverse\lib\context.js:142:19)

angular.json:

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "primer": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/primer",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
             ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "primer:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "primer:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "primer:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "primer:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "primer:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "primer"
}

tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

package,json:

{
  "name": "primer",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href / --deploy-url /venditio-client/ --prod",
    "build-qa-prod": "node --max_old_space_size=2048  ./node_modules/.bin/ng build --prod --configuration=qa --base-href / --deploy-url /",
    "build-qa": "ng build --configuration=qa --base-href / --deploy-url /venditio-client/ --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.6",
    "@angular/cdk": "^11.2.5",
    "@angular/common": "~11.2.6",
    "@angular/compiler": "~11.2.6",
    "@angular/core": "~11.2.6",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "~11.2.6",
    "@angular/material": "11.2.5",
    "@angular/platform-browser": "~11.2.6",
    "@angular/platform-browser-dynamic": "~11.2.6",
    "@angular/router": "~11.2.6",
    "@asymmetrik/ngx-leaflet": "6.0.1",
    "@fullcalendar/core": "^4.3.1",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-loading-bar/router": "4.2.0",
    "@ngx-translate/core": "11.0.1",
    "@ngx-translate/http-loader": "4.0.0",
    "@swimlane/ngx-datatable": "19.0.0",
    "angular-calendar": "0.27.18",
    "angular-tree-component": "8.4.0",
    "chart.js": "^2.9.4",
    "core-js": "^2.6.12",
    "d3": "5.12.0",
    "font-awesome": "^4.7.0",
    "intl": "1.2.5",
    "leaflet": "1.5.1",
    "moment": "2.24.0",
    "ng-block-ui": "^3.0.2",
    "ng2-charts": "^2.4.2",
    "ng2-dragula": "2.1.1",
    "ng2-file-upload": "1.3.0",
    "ng2-validation": "4.2.0",
    "ngx-material-timepicker": "^5.5.3",
    "ngx-perfect-scrollbar": "8.0.0",
    "ngx-toastr": "^13.2.1",
    "primeflex": "^1.3.0",
    "primeicons": "^2.0.0",
    "primeng": "^11.3.1",
    "quill": "^1.3.7",
    "rxjs": "~6.6.0",
    "screenfull": "5.0.0",
    "sweetalert2": "^10.15.6",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2",
    "rxjs-compat": "^6.6.6"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.5",
    "@angular/cli": "^11.2.5",
    "@angular/compiler-cli": "11.2.6",
    "@angular/language-service": "11.2.6",
    "@types/jasmine": "^3.6.7",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^12.20.5",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}
angular typescript ecmascript-5 ecmascript-6
6 Answers

I just ran into this issue after upgrading to angular@13. I fixed it by updating the "version" field in angular.json from 1 to 2.

user_3758100

I also meet this problem with Angular@9. I've proved it's babel's issue that switch statement coupled with closures.

I have 2 solutions:

  1. Do not generate es5 bundles, by setting "target": "es2015", in tsconfig.json, and set browserslist in package.json, such as
    "browserslist": [
        "last 2 Edge versions",
        "last 2 Firefox versions",
        "last 2 Safari versions",
        "Chrome > 60"
      ]

Then run ng build --prod won't generate es5 bundles, so no error occurs.

  1. Rewrite the problem closure with simple statement. eg. my issue code is like:
    switch (type) {
        case 'treemap':
            let path = [1,2,3];
            let searchNode = [{name:2}];
            for (let i = 0; i < path.length; i++) {
              let searchResult = searchNode.filter((item) => {
                 return item.name === path[i];
              });
            }
           // ....other biz logic
           break;
    //........other biz logic

to use for of instead of the filter function.

I've opened a bug for babel https://github.com/babel/babel/issues/13279

user_126047620

The above didn't work for me; however after a ton of debugging (Angular 13, NRWL 13) the solution was this:

Under project.json (for the app you want to build), simply add "dependsOn":[]

For example,

"architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "dependsOn": [],
                    "options": {...

I'm not sure why it works to be honest; but I added print statements to the NRWL node module and saw that it wasn't detecting any projects (undefined) so the warning helped.

Best Regards, ~jedihacks

user_23718120

I also updated to Angular 13 and got the error. For me, it fixed it to slightly downgrade another dependency i was using: @angular-devkit/build-angular.

I was using the (for now) latest version, which was 13.3.x, the problem was solved version 13.1.0.

user_23090570

i ran into the same problem.

But mine was self made: i had some errors in my i18n files that some values was null, which caused that problem.

Replacing them with an empty string resolved the error.

user_32449410

For me, the issue is with mongoose version. Then I reverted it back to v5.11.17 (which was working fine for me before) and now the issue is gone. Not sure how it happened, however, for me, the Angular app is working now.

user_94749060
Related