Search code examples
node.jsangularheroku

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

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! rehabsoft-frontend@0.0.0 heroku-postbuild: `ng build --prod && npm install -g http-server-spa`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the rehabsoft-frontend@0.0.0 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?

EDIT:
I also run heroku config:set NPM_CONFIG_LOGLEVEL=verbose command to see more detailed log output. You can see the build output after I run this:

Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling angular-bootstrap-md : es2015 as esm2015
- Generating browser application bundles...
✔ Browser application bundle generation complete.
Error: Cannot read property '0' of undefined
npm verb lifecycle rehabsoft-frontend@0.0.0~heroku-postbuild: unsafe-perm in lifecycle true
npm verb lifecycle rehabsoft-frontend@0.0.0~heroku-postbuild: PATH: /tmp/build_cfc9b878/.heroku/node/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/tmp/build_cfc9b878/node_modules/.bin:/tmp/build_cfc9b878/.heroku/node/bin:/tmp/build_cfc9b878/.heroku/yarn/bin:/usr/local/bin:/usr/bin:/bin
npm verb lifecycle rehabsoft-frontend@0.0.0~heroku-postbuild: CWD: /tmp/build_cfc9b878
npm info lifecycle rehabsoft-frontend@0.0.0~heroku-postbuild: Failed to exec heroku-postbuild script
npm verb stack Error: rehabsoft-frontend@0.0.0 heroku-postbuild: `ng build --prod && npm install -g http-server-spa`
npm verb stack Exit status 1
npm verb stack     at EventEmitter.<anonymous> (/tmp/build_cfc9b878/.heroku/node/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
npm verb stack     at EventEmitter.emit (events.js:315:20)
npm verb stack     at ChildProcess.<anonymous> (/tmp/build_cfc9b878/.heroku/node/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
npm verb stack     at ChildProcess.emit (events.js:315:20)
npm verb stack     at maybeClose (internal/child_process.js:1048:16)
npm verb stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
npm verb pkgid rehabsoft-frontend@0.0.0
npm verb cwd /tmp/build_cfc9b878
npm verb Linux 4.4.0-1086-aws
npm verb argv "/tmp/build_cfc9b878/.heroku/node/bin/node" "/tmp/build_cfc9b878/.heroku/node/bin/npm" "run" "heroku-postbuild" "--if-present"
npm verb node v14.15.5
npm verb npm  v6.14.9
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! rehabsoft-frontend@0.0.0 heroku-postbuild: `ng build --prod && npm install -g http-server-spa`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the rehabsoft-frontend@0.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm verb exit [ 1, true ]
npm timing npm Completed in 326009ms
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.WBTLI/_logs/2021-03-27T09_47_12_360Z-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
Solution

  • I found the cause of this problem. I have developed the project on Windows 10. When I run the application on an Ubuntu system, I faced some compile errors that didn't occur on my Windows system. I don't know why I didn't get these errors on the Windows. If anyone faces this problem, you should test your application on Ubuntu firstly to see if your application really works.