Error: Cannot read property ‘0’ of undefined while deploying on Heroku

  angular, heroku, node.js

I developed an Angular 10 project and prepared my package.json file to deploy on Heroku. You can see the package.json:

{
  "name": "rehabsoft-frontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "http-server-spa dist/rehabsoft-frontend index.html $PORT",
    "heroku-postbuild": "ng build --prod && npm install -g http-server-spa",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-themes": "devextreme build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.11",
    "@angular/cdk": "^10.2.7",
    "@angular/cli": "~10.0.7",
    "@angular/common": "~10.0.11",
    "@angular/compiler": "~10.0.11",
    "@angular/compiler-cli": "~10.0.11",
    "@angular/core": "~10.0.11",
    "@angular/forms": "~10.0.11",
    "@angular/platform-browser": "~10.0.11",
    "@angular/platform-browser-dynamic": "~10.0.11",
    "@angular/router": "~10.0.11",
    "@fortawesome/fontawesome-free": "^5.15.1",
    "@types/chart.js": "^2.9.27",
    "angular-bootstrap-md": "^10.0.0",
    "animate.css": "^4.1.1",
    "chart.js": "^2.5.0",
    "compression": "^1.7.4",
    "devextreme": "20.1.7",
    "devextreme-angular": "20.1.7",
    "devextreme-schematics": "^1.2.4",
    "express": "^4.17.1",
    "hammerjs": "^2.0.8",
    "ngx-cookie-service": "^10.1.1",
    "rxjs": "~6.5.5",
    "sweetalert2": "^10.10.3",
    "tslib": "^2.0.0",
    "typescript": "~3.9.5",
    "video.js": "^7.10.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.3",
    "@angular/cli": "~10.0.7",
    "@angular/compiler-cli": "~10.0.11",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "devextreme-cli": "latest",
    "devextreme-intl": "^19.1.8",
    "devextreme-themebuilder": "20.1.7",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  },
  "engines": {
    "node": "14.15.5",
    "npm": "6.14.9"
  }
}

After pushed to the Heroku, it gave me this error:

- Generating browser application bundles...
✔ Browser application bundle generation complete.
Error: Cannot read property '0' of undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] heroku-postbuild: `ng build --prod && npm install -g http-server-spa`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.E6zzA/_logs/2021-03-26T20_34_47_429Z-debug.log
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile Node.js app.
 !     Push failed

I have tried to run ng build --prod && npm install -g http-server-spa and http-server-spa dist/rehabsoft-frontend index.html $PORT commands on my local, and everything is worked as expected. I know that Cannot read property '0' of undefined error mostly occur while there is an undefined array element occurred in code. But I have tested everything on my local and it perfectly worked. Is there any mispoint that I couldn’t notice?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.