Issue

So today I try to deploy my React project to Heroku as usual. I had got 1 hour to show my customer. Then suddenly deploy failed.

When I read the logs I see the error FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory. I inspect the dyno and graphs. Memory goes up to 700mb but my limit was 500mb. I figured out that Heroku command starts the development phase of my project.

The Solution

The solution was simple. I install the Express server and create a single file server.js and run the building part from there.

Here is the example code.

Do not add PORT to your environment variables from the Heroku control panel. Heroku assigns the value automatically.

const express = require("express");
const path = require("path");
const port = process.env.PORT || 3000;
const app = express();
app.use(express.static(__dirname));
app.use(express.static(path.join(__dirname, "build")));
app.get("/*", function(req, res) {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
app.listen(port);

And also edited my package.json start script (also Heroku use this command to start app) to run server.js like this.

"scripts": {
"start": "node server.js",
"dev": "react-scripts --max_old_space_size=4096 start",
"build": "react-scripts --max_old_space_size=4096 build",
},

This works perfectly and deployed successfully.