How to deploy reactapp with heroku-22?

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("https://stackoverflow.com/", 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.