"git push" failing on Heroku [duplicate] - reactjs

Question

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 %

Answer 1

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