Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Heroku Button Failing to Deploy

See original GitHub issue

I’m having trouble with the Heroku deploy button, it might just be a user error. It’s failing to build and it looks like some version disagreement. Can someone with more experience take a look at this?

-----> Determining which buildpack to use for this app
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
       engines.node (package.json):  14 - 18
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 14 - 18...
       Downloading and installing node 18.4.0...
       Using default npm version: 8.12.1
       
-----> Installing dependencies
       Installing node modules (package.json)
       
       > juice-shop@14.0.1 postinstall
       > cd frontend && npm install --legacy-peer-deps && cd .. && npm run build:frontend && (npm run --silent build:server || cd .)
       
       
       > frontend@14.0.1 postinstall
       > ngcc --tsconfig "./src/tsconfig.app.json"
       
       - @angular/flex-layout/core [es2015/esm2015] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/core [main/umd] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/core [module/esm5] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/extended [es2015/esm2015] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/extended [main/umd] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/extended [module/esm5] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/flex [es2015/esm2015] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/flex [main/umd] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/flex [module/esm5] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/grid [es2015/esm2015] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/grid [main/umd] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout/grid [module/esm5] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout [es2015/esm2015] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout [main/umd] (https://github.com/angular/flex-layout.git)
       - @angular/flex-layout [module/esm5] (https://github.com/angular/flex-layout.git)
       - @angular/http [fesm2015/esm2015] (https://github.com/angular/angular.git)
       - @angular/http [fesm5/esm5] (https://github.com/angular/angular.git)
       - @angular/http [esm2015/esm2015] (https://github.com/angular/angular.git)
       - @angular/http [esm5/esm5] (https://github.com/angular/angular.git)
       - @angular/http [main/umd] (https://github.com/angular/angular.git)
       - @angular/http/testing [fesm2015/esm2015] (https://github.com/angular/angular.git)
       - @angular/http/testing [fesm5/esm5] (https://github.com/angular/angular.git)
       - @angular/http/testing [esm2015/esm2015] (https://github.com/angular/angular.git)
       - @angular/http/testing [esm5/esm5] (https://github.com/angular/angular.git)
       - @angular/http/testing [main/umd] (https://github.com/angular/angular.git)
       - @angular-material-extensions/password-strength [fesm2015/esm2015] (git://github.com/angular-material-extensions/password-strength.git)
       - @angular-material-extensions/password-strength [fesm5/esm5] (git://github.com/angular-material-extensions/password-strength.git)
       - @angular-material-extensions/password-strength [esm2015/esm2015] (git://github.com/angular-material-extensions/password-strength.git)
       - @angular-material-extensions/password-strength [esm5/esm5] (git://github.com/angular-material-extensions/password-strength.git)
       - @angular-material-extensions/password-strength [main/umd] (git://github.com/angular-material-extensions/password-strength.git)
       - @nguniversal/common [fesm2015/esm2015] (https://github.com/angular/universal)
       - @nguniversal/common [esm2015/esm2015] (https://github.com/angular/universal)
       - @nguniversal/common [main/umd] (https://github.com/angular/universal)
       - @nguniversal/common/tokens [fesm2015/esm2015] (https://github.com/angular/universal)
       - @nguniversal/common/tokens [esm2015/esm2015] (https://github.com/angular/universal)
       - @nguniversal/common/tokens [main/umd] (https://github.com/angular/universal)
       - @nguniversal/express-engine/tokens [fesm2015/esm2015] (https://github.com/angular/universal)
       - @nguniversal/express-engine/tokens [esm2015/esm2015] (https://github.com/angular/universal)
       - @nguniversal/express-engine/tokens [main/umd] (https://github.com/angular/universal)
       - @ngx-translate/core [fesm2015/esm2015] (git+https://github.com/ngx-translate/core.git)
       - @ngx-translate/core [esm2015/esm2015] (git+https://github.com/ngx-translate/core.git)
       - @ngx-translate/core [main/umd] (git+https://github.com/ngx-translate/core.git)
       - @ngx-translate/http-loader [fesm2015/esm2015] (git+https://github.com/ngx-translate/http-loader.git)
       - @ngx-translate/http-loader [esm2015/esm2015] (git+https://github.com/ngx-translate/http-loader.git)
       - @ngx-translate/http-loader [main/umd] (git+https://github.com/ngx-translate/http-loader.git)
       - anuglar2-qrcode [main/umd] (git+https://github.com/SuperiorJT/angular2-qrcode.git)
       - anuglar2-qrcode [module/esm5] (git+https://github.com/SuperiorJT/angular2-qrcode.git)
       - ng-mat-search-bar [fesm2015/esm2015] (https://github.com/tommueller/ng-mat-search-bar.git)
       - ng-mat-search-bar [esm2015/esm2015] (https://github.com/tommueller/ng-mat-search-bar.git)
       - ng-mat-search-bar [main/umd] (https://github.com/tommueller/ng-mat-search-bar.git)
       - ng-simple-slideshow [es2015/esm2015] (git+https://github.com/dockleryxk/ng-simple-slideshow.git)
       - ng-simple-slideshow [main/umd] (git+https://github.com/dockleryxk/ng-simple-slideshow.git)
       - ng-simple-slideshow [module/esm5] (git+https://github.com/dockleryxk/ng-simple-slideshow.git)
       - ng2-file-upload [fesm2015/esm2015] ()
       - ng2-file-upload [fesm5/esm5] ()
       - ng2-file-upload [esm2015/esm2015] ()
       - ng2-file-upload [esm5/esm5] ()
       - ng2-file-upload [main/umd] ()
       - ngx-text-diff [fesm2015/esm2015] (https://github.com/ABenassi87/ngx-text-diff.git)
       - ngx-text-diff [fesm5/esm5] (https://github.com/ABenassi87/ngx-text-diff.git)
       - ngx-text-diff [esm2015/esm2015] (https://github.com/ABenassi87/ngx-text-diff.git)
       - ngx-text-diff [esm5/esm5] (https://github.com/ABenassi87/ngx-text-diff.git)
       - ngx-text-diff [main/umd] (https://github.com/ABenassi87/ngx-text-diff.git)
       
       added 929 packages, and audited 930 packages in 46s
       
       112 packages are looking for funding
         run `npm fund` for details
       
       found 0 vulnerabilities
       
       > juice-shop@14.0.1 build:frontend
       > cd frontend && node ./node_modules/@angular/cli/bin/ng build --aot --configuration production --output-hashing=none --vendor-chunk=true --source-map=false
       
       - Generating browser application bundles (phase: setup)...
       DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
       
       Recommendation: math.div(4, 3) or calc(4 / 3)
       
       More info and automated migrator: https://sass-lang.com/d/slash-div
       
          ╷
       11 │   width: (4 / 3) * 1em;
          │           ^^^^^
          ╵
           node_modules/flag-icon-css/sass/_flag-icon-base.scss 11:11  @import
           node_modules/flag-icon-css/sass/flag-icon.scss 2:9          root stylesheet
       
       ✔ Browser application bundle generation complete.
       ✔ Browser application bundle generation complete.
       
       ./node_modules/ngx-cookie/fesm2015/ngx-cookie.mjs - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js):
       TypeError: Cannot create property 'message' on string '/tmp/build_60a5f0d7/frontend/node_modules/ngx-cookie/fesm2015/ngx-cookie.mjs: This application depends upon a library published using Angular version 14.0.4, which requires Angular version 14.0.0 or newer to work correctly.
       Consider upgrading your application to use a more recent version of Angular.
         313 | }
         314 | CookieModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: CookieModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
       > 315 | CookieModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.4", ngImport: i0, type: CookieModule });
             |                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
         316 | CookieModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: CookieModule, providers: [CookieOptionsProvider] });
         317 | i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.4", ngImport: i0, type: CookieModule, decorators: [{
         318 |             type: NgModule,'
           at run (/tmp/build_60a5f0d7/frontend/node_modules/@babel/core/lib/transformation/index.js:37:15)
           at run.next (<anonymous>)
           at Function.transform (/tmp/build_60a5f0d7/frontend/node_modules/@babel/core/lib/transform.js:25:41)
           at transform.next (<anonymous>)
           at step (/tmp/build_60a5f0d7/frontend/node_modules/gensync/index.js:261:32)
           at /tmp/build_60a5f0d7/frontend/node_modules/gensync/index.js:273:13
           at async.call.result.err.err (/tmp/build_60a5f0d7/frontend/node_modules/gensync/index.js:223:11)
           at /tmp/build_60a5f0d7/frontend/node_modules/gensync/index.js:189:28
           at /tmp/build_60a5f0d7/frontend/node_modules/@babel/core/lib/gensync-utils/async.js:74:7
           at /tmp/build_60a5f0d7/frontend/node_modules/gensync/index.js:113:33
           at step (/tmp/build_60a5f0d7/frontend/node_modules/gensync/index.js:287:14)
           at /tmp/build_60a5f0d7/frontend/node_modules/gensync/index.js:273:13
           at async.call.result.err.err (/tmp/build_60a5f0d7/frontend/node_modules/gensync/index.js:223:11)
       
       
       npm ERR! code 1
       npm ERR! path /tmp/build_60a5f0d7
       npm ERR! command failed
       npm ERR! command sh -c cd frontend && npm install --legacy-peer-deps && cd .. && npm run build:frontend && (npm run --silent build:server || cd .)
       
       npm ERR! A complete log of this run can be found in:
       npm ERR!     /tmp/npmcache.luIGo/_logs/2022-07-01T22_02_27_749Z-debug-0.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```

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
bkimminichcommented, Jul 3, 2022

Local install from master also failed for me, so it has nothing to do with the Heroku button. I’ve just merged v14.1.0 into master and with that comes Angular 14. Heroku and local install should work again. I’ll also publish this as a formal release once the branch CI/CD job passed.

0reactions
joe733commented, Jul 20, 2022

image

Not sure if this is related, but the web-app is down.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Creating a 'Deploy to Heroku' Button
The 'Deploy to Heroku' button enables users to deploy apps to Heroku without leaving the web browser, and with little or no configuration....
Read more >
deploy to Heroku button build failure · Issue #5856 - GitHub
A clear and concise description of what the bug is. Build fails, see the build log attached. Steps to reproduce the behavior: I...
Read more >
Button Styles not applied when I deploy to Heroku
Hello, The photo you are refferring to is only showing when I run local host, my issue is when I deploy to Heroku...
Read more >
Deploy to Heroku using Deploy to Heroku button is broken
I updated the buildpack responsible for fetching git submodules, added information about the python runtime and the build phase of deployment is okay....
Read more >
Deploy to Heroku button doesnt work properly? (since the ...
But if I do it manually on the Heroku website, logged-in, via Dashboard, New, New App, and choose Deployment Method = Github, and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

[🚀] Cypress Improvements

Next page

🐛 BASE_PATH configuration failing to load all resources when used with a basic reverse proxy setup