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 %
