I have created a web application which uses technology like Node.js and React.js. Now I created it and now I am trying to push this app to Heroku and when I do that it shows some error persistently, I tried in very different numerous ways but it doesn't work. Error log is something like this:
Counting objects: 25717, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (16046/16046), done.
Writing objects: 100% (25717/25717), 26.05 MiB | 59.00 KiB/s, done.
Total 25717 (delta 8710), reused 25548 (delta 8617)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote: parse error: Expected another key-value pair at line 12, column 3
remote: ! Unable to parse package.json
remote:
remote:
remote: -----> Build failed
remote: parse error: Expected another key-value pair at line 12, column 3
remote: parse error: Expected another key-value pair at line 12, column 3
remote: parse error: Expected another key-value pair at line 12, column 3
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to optioncapital.
remote:
To https://git.heroku.com/optioncapital.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/optioncapital.git'
I am not understanding weather procfile and all are required or not, but I am learning through one online course and that person isn't doing anything like that.... Please tell me how to resolve this issue...
Looking at this error:
remote: parse error: Expected another key-value pair at line 12, column 3
remote: ! Unable to parse package.json
It looks like you are having an issue with the package.json
===========================================
Do this
Delete 'node_modules' folder
npm cache clean
npm update
Related
This question already has answers here:
How to deploy reactapp with heroku-22?
(3 answers)
git, Heroku: pre-receive hook declined
(25 answers)
Closed 20 days ago.
I am trying to see how to use React on a Heroku app for the first time.
I followed these tutorials:
https://www.bacancytechnology.com/blog/deploy-react-app-on-heroku
https://stackabuse.com/how-to-deploy-a-react-app-to-heroku/
By the end I hit the issue below when running the command: git push heroku main
I did two trials and had the same problem each time. I do not remember having seen this before. What is the way to handle the situation?
remote: Verifying deploy...
remote:
remote: ! Push rejected to testapp.
remote:
To https://git.heroku.com/testapp.git
! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/testapp.git'
me#My-MacBook testapp %
For more details; this is the complete result of running the git push heroku main command:
me#My-MacBook testapp % git push heroku main
Enumerating objects: 22, done.
Counting objects: 100% (22/22), done.
Delta compression using up to 8 threads
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 307.67 KiB | 8.10 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-22 stack
remote: -----> Using buildpack: mars/create-react-app
remote: -----> React.js (create-react-app) multi app detected
remote:
remote: =====! create-react-app-buildpack has reached end-of-life 🌅
remote: This build may succeed, but the buildpack is no longer maintained.
remote: On the Heroku-22 stack and beyond, this may fail to build at all.
remote:
remote: Please consider migrating to https://nextjs.org or https://remix.run to develop React apps which are deployable using Heroku's Node.js buildpack https://github.com/heroku/heroku-buildpack-nodejs, or you may develop your own create-react-app deployment with Node.js and Nginx buildpacks.
remote:
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 18.x...
remote: Downloading and installing node 18.13.0...
remote: Using default npm version: 8.19.3
remote:
remote: -----> Installing dependencies
remote: Installing node modules
remote:
remote: added 1470 packages, and audited 1471 packages in 19s
remote:
remote: 231 packages are looking for funding
remote: run `npm fund` for details
remote:
remote: 6 high severity vulnerabilities
remote:
remote: To address all issues (including breaking changes), run:
remote: npm audit fix --force
remote:
remote: Run `npm audit` for details.
remote:
remote: -----> Build
remote: Running build
remote:
remote: > testapp#0.1.0 build
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Compiled successfully.
remote:
remote: File sizes after gzip:
remote:
remote: 46.6 kB build/static/js/main.c9d4c383.js
remote: 1.78 kB build/static/js/787.49a3df42.chunk.js
remote: 541 B build/static/css/main.073c9b0a.css
remote:
remote: The project was built assuming it is hosted at /.
remote: You can control this with the homepage field in your package.json.
remote:
remote: The build folder is ready to be deployed.
remote: You may serve it with a static server:
remote:
remote: npm install -g serve
remote: serve -s build
remote:
remote: Find out more about deployment here:
remote:
remote: https://cra.link/deployment
remote:
remote:
remote: -----> Caching build
remote: - npm cache
remote:
remote: -----> Pruning devDependencies
remote:
remote: up to date, audited 1471 packages in 4s
remote:
remote: 231 packages are looking for funding
remote: run `npm fund` for details
remote:
remote: 6 high severity vulnerabilities
remote:
remote: To address all issues (including breaking changes), run:
remote: npm audit fix --force
remote:
remote: Run `npm audit` for details.
remote:
remote: -----> Build succeeded!
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git#v9.0.0
remote: =====> Detected Framework: React.js (create-react-app)
remote: Writing `static.json` to support create-react-app
remote: Enabling runtime environment variables
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static.git#21c1f5175186b70cf247384fd0bf922504b419be
remote: =====> Detected Framework: Static HTML
remote: Stack heroku-22 is not supported!
remote: ! Push rejected, failed to compile React.js (create-react-app) multi app.
remote:
remote: ! Push failed
remote: !
remote: ! ## Warning - The same version of this code has already been built: f609d0c54516882f24faf2a1b4fcad975cc76b04
remote: !
remote: ! We have detected that you have triggered a build from source code with version f609d0c54516882f24faf2a1b4fcad975cc76b04
remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote: !
remote: ! If you are developing on a branch and deploying via git you must run:
remote: !
remote: ! git push heroku <branchname>:main
remote: !
remote: ! This article goes into details on the behavior:
remote: ! https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to testapp.
remote:
To https://git.heroku.com/testapp.git
! [remote rejected] main -> main (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/testapp.git'
me#My-MacBook testapp %
As your logs explain, this is not a git push issue but rather heroku version compatibility issue with react. I hope this helps,
https://stackoverflow.com/a/72743983/2699319
> pre-receive hook declined
indicates either that branch is protected from direct pushes OR you lack the permissions to push to that branch. If it's your own project, you can change this in the repository's settings. If it's a group/company project, you might want to ask around for permissions/access.
Since it is called main, I will assume the branch is important for the overall project. You might want to make a pull request then ask your peers to review and approve it.
Alternatively if you are testing this out in a sandbox environment by yourself, you can just force push
git push -f heroku main
I had deployed a website I am working which is a Reactjs Express App to Heroku. It has deployed for 3 weeks now. But after making some changes to app recently I am not able to push the code to heroku. I am encountering an error when doing a push.
$ git push heroku master
Enumerating objects: 912, done.
Counting objects: 100% (912/912), done.
Delta compression using up to 8 threads
Compressing objects: 100% (725/725), done.
Writing objects: 100% (742/742), 27.42 MiB | 2.69 MiB/s, done.
Total 742 (delta 160), reused 30 (delta 8), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: heroku/nodejs
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: USE_YARN_CACHE=true
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=false
remote:
remote: -----> Build failed
remote: ! The 'yarnPath' could not be read from the 'yarnrc.yml' file
remote:
remote: It looks like 'yarnrc.yml' is missing the 'yarnPath' value, which is needed
remote: to identify the location of yarn for this build.
remote:
remote: To regenerate 'yarnrc.yml' with the 'yarnPath' value set, make sure Yarn 2
remote: is installed on your local machine and set the version in your project
remote: directory with:
remote:
remote: $ yarn set version berry
remote:
remote: Read more at the Yarn docs: https://yarnpkg.com/getting-started/install#per-project-install
remote:
remote: https://devcenter.heroku.com/articles/nodejs-support
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: !
remote: ! ## Warning - The same version of this code has already been built: 21afbb1f965651a191a2a03c3d0047685d8c76fc
remote: !
remote: ! We have detected that you have triggered a build from source code with version 21afbb1f965651a191a2a03c3d0047685d8c76fc
remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote: !
remote: ! If you are developing on a branch and deploying via git you must run:
remote: !
remote: ! git push heroku <branchname>:main
remote: !
remote: ! This article goes into details on the behavior:
remote: ! https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to jithin-career.
remote:
To https://git.heroku.com/jithin-career.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/jithin-career.git'
I have been trying to find a solution to this for some time. Some of the solutions which was mentioned didn't work for me. Can anyone please help me this issue?
I had a similar problem.
Here is the solution.
locally, run the following command
yarn set version berry
activate Zero-Install in .gitignore
.yarn/*
!.yarn/cache
!.yarn/releases
!.yarn/plugins
!.yarn/sdks
!.yarn/versions
or Deactivate Zero-Install
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions
yarn install and apply instllation.
Commit all changes to git repogitory.
git push heroku main
For more information, please refer to the official manual page.
https://devcenter.heroku.com/articles/migrating-to-yarn-2#make-changes-to-source-code
I have an app create in Heroku with a free account.
It's my first Nextjs app. I have created a few react apps and deployed them successfully using the https://github.com/mars/create-react-app-buildpack buildpack,
I am attempting to use the https://github.com/mars/heroku-nextjs.git buildpack. I continue to get the following error when pushing and attempting to build:
Enumerating objects: 695, done.
Counting objects: 100% (695/695), done.
Delta compression using up to 4 threads
Compressing objects: 100% (638/638), done.
Writing objects: 100% (695/695), 406.94 KiB | 1.78 MiB/s, done.
Total 695 (delta 388), reused 20 (delta 13)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: https://github.com/mars/heroku-nextjs.git
remote: -----> App not compatible with buildpack: https://github.com/mars/heroku-nextjs.git
remote: bash: /tmp/codon/tmp/buildpacks/cc998aa50faebde1ea66717737aec22c884e4936/bin/detect: No such file or directory
remote:
remote: More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
remote:
remote: ! Push failed
remote: !
remote: ! ## Warning - The same version of this code has already been built: b1006412ec2d412e7edaed795dcbceff02d98f82
remote: !
remote: ! We have detected that you have triggered a build from source code with version b1006412ec2d412e7edaed795dcbceff02d98f82
remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote: !
remote: ! If you are developing on a branch and deploying via git you must run:
remote: !
remote: ! git push heroku <branchname>:main
remote: !
remote: ! This article goes into details on the behavior:
remote: ! https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to gurnzapp-test.
I have read everything I can find online about this. The most common error that is in the github issues is that people put package.json in a subdirectory. My package.json is in the root. My project is set up correctly as far as I can tell.
I have tried:
pushing from the main branch directly to heroku's main branch.
pushing from a local development branch in the git push heroku development:main format.
removeing package-lock.json.
Using another buildpack: https://github.com/ryanbahniuk/nextjs-buildpack.git
I'm at a loss as to why I'd have issues building. Any help would be amazing :D
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: https://github.com/mars/heroku-nextjs.git
remote: -----> App not compatible with buildpack: https://github.com/mars/heroku-nextjs.git
remote: bash: /tmp/codon/tmp/buildpacks/cc998aa50faebde1ea66717737aec22c884e4936/bin/detect: No such file or directory
remote:
remote: More info: https://devcenter.heroku.com/articles/buildpacks#detection-failure
remote:
remote: ! Push failed
It says App not compatible with buildpack.
This is not a buildpack:
https://github.com/mars/heroku-nextjs
These are buildpacks:
https://github.com/mars/create-react-app-buildpack
https://github.com/heroku/heroku-buildpack-nodejs
You can ignore this buildpack. It does nothing.
https://github.com/ryanbahniuk/nextjs-buildpack
Read how buildpacks work here:
https://devcenter.heroku.com/articles/buildpacks
I've downloaded a font file from online with a .ttf extension. I'm loading it in my css like this
#font-face {
font-family: 'ChalkDash';
src: local('ChalkDash'), url(./fonts/ChalkDash.ttf) format('truetype');
}
It works fine on localhost and the font is loaded properly. My html elements get styled with that font to be clear. However, when I deploy to heroku, I get this error:
Counting objects: 30, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (30/30), done.
Writing objects: 100% (30/30), 2.74 KiB | 1.37 MiB/s, done.
Total 30 (delta 23), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> React.js (create-react-app) multi app detected
remote: -----> Configure create-react-app build environment
remote: Using `NODE_ENV=development`
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=false
remote: NODE_VERBOSE=false
remote: NODE_ENV=development
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote:
remote: Resolving node version 8.x...
remote: Downloading and installing node 8.11.1...
remote: Using default npm version: 5.6.0
remote:
remote: -----> Restoring cache
remote: Loading 2 from cacheDirectories (default):
remote: - node_modules
remote: - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json + package-lock)
remote: added 113 packages in 12.842s
remote:
remote: -----> Caching build
remote: Clearing previous node cache
remote: Saving 2 cacheDirectories (default):
remote: - node_modules
remote: - bower_components (nothing to cache)
remote:
remote: -----> Pruning devDependencies
remote: Skipping because NODE_ENV is not 'production'
remote:
remote: -----> Build succeeded!
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote: Writing `static.json` to support create-react-app
remote: Enabling runtime environment variables
remote:
remote: > reverse-hangman-app#0.1.0 build /tmp/build_b679e081d23e4ff1218d9c24620bc77b
remote: > react-scripts build
remote:
remote: Creating an optimized production build...
remote: Failed to compile.
remote:
remote: Module not found: Error: Can't resolve './fonts/ChalkDash.ttf' in '/tmp/build_b679e081d23e4ff1218d9c24620bc77b/src'
remote:
remote:
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! reverse-hangman-app#0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the reverse-hangman-app#0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /app/.npm/_logs/2018-04-24T15_48_50_183Z-debug.log
remote: ! Push rejected, failed to compile React.js (create-react-app) multi app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to limitless-depths-91672.
remote:
To https://git.heroku.com/limitless-depths-91672.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/limitless-depths-91672.git'
I'm just wondering why this is happening. I've browsed so many posts on this forum but couldn't figure out why it won't work and I have tried a bunch of fixes to no avail. Can anyone point me in the right direction?
I am trying to host the react app in heroku...
I have created the app using create-react-app..And follow the following methods in hosting...
git init
heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "Start with create-react-app"
git push heroku master
heroku open
But when I am trying to push the app to heroku it returns the following error...
remote: - htmlparser.js:235 new HTMLParser
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[html-minifier]/src/htmlparser.js:2 35:13
remote:
remote: - htmlminifier.js:946 minify
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[html-minifier]/src/htmlminifier.js :946:3
remote:
remote: - htmlminifier.js:1299 exports.minify
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[html-minifier]/src/htmlminifier.js :1299:10
remote:
remote: - index.js:296
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[html-webpack-plugin]/index.js:296: 16
remote:
remote: - util.js:16 tryCatcher
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/util.js:16:23
remote: - promise.js:512 Promise._settlePromiseFromHandler
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/promise.js:51 2:31
remote:
remote: - promise.js:569 Promise._settlePromise
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/promise.js:56 9:18
remote:
remote: - promise.js:614 Promise._settlePromise0
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/promise.js:61 4:10
remote:
remote: - promise.js:693 Promise._settlePromises
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/promise.js:69 3:18
remote:
remote: - async.js:133 Async._drainQueue
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/async.js:133: 16
remote:
remote: - async.js:143 Async._drainQueues
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/async.js:143: 10
remote:
remote: - async.js:17 Immediate.Async.drainQueues
remote: [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/async.js:17:1 4
How can I resolve this issue?
I just cloned your repo and tried npm install + npm run build. I found that npm run build fails locally. So, this is an error with the code, not with Heroku deployment.
The failure is from HTMLParser, so I looked at the public/index.html and found a heavily customized template.
To check if that public/index.html content was the problem, I replaced it with the default create-react-app HTML template code. Then, npm run build completed successfully.
So, it seems there is a problem with the validity of the HTML in your public/index.html which breaks create-react-app's template engine. I suggest running it through an HTML validator to find problems, or manually breaking the template into smaller testable pieces until you find the part that causes the build error.