How to deploy reactapp with heroku-22?

Question

I received this message when i deploy to heroku:

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.  

I'm using this buildpack:

https://github.com/mars/create-react-app-buildpack

But heroku will no longer support it. I don't know how to migrate my reactapp to nextjs or remix, anyone know an alternative buildpack that supports the newer version of heroku?

Answer 1

Old Answer

The buildpack you're using is deprecated and doesn't work on Heroku-22. The simple solution, which is what I've done, is to postpone upgrading the Heroku stack until a new buildpack for Create-React-App is released. Heroku-18 is deprecated though, so you should upgrade to Heroku-20.

heroku stack:set heroku-20

Updated answer (as of 2023-01-05)

If you have a static website without environment variables, you can use an express server to run the static pre-build assets. Instructions based on this Medium article.

1. Remove the current buildpack from Heroku via the settings tab of your app in Heroku.
2. Install express with npm install express (or yarn add express)
3. Create a file scripts/heroku-start.js with the following content:

const express = require('express');
const path = require('path');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json());
// Your static pre-build assets folder
app.use(express.static(path.join(__dirname, '..', 'build')));
// Root Redirects to the pre-build assets
app.get('/', function(req,res){
  res.sendFile(path.join(__dirname, '..', 'build'));
});
// Any Page Redirects to the pre-build assets folder index.html that // will load the react app
app.get('*', function(req,res){
  res.sendFile(path.join(__dirname, '..', 'build/index.html'));
});
app.listen(port, ()=>{
  console.log("Server is running on port: ", port)
})

4. Create a file Procfile with the following content:

web: node scripts/heroku-start.js

5. Set Heroku stack to Heroku-22 and deploy.

Answer 2

I seem to have found a easy work around that is currently working on my site. I was getting the same error:

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.

Although i already had the same page running on Heroku with different text/images (which is somehow running my react page without any buildpack currently).

To fix the issue this is what i tried and it allowed me to git push my app.

When you are pushing your react app from npm make sure to remove the react buildpack from the Heroku settings page for that app, repush via NPM and it should load without any issues and your app is now uploaded to Heroku. Now if you go and reapply your buildpack (https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz) and refresh your page it should be working fine.

Answer 3

FYI the new buildpack by the same commiter is now update and working..

https://github.com/heroku/heroku-buildpack-nodejs - Please review and plug this into the heroku :0

thank you internet NERDS - Love you all

Zero