Create-react-app: Memory quota exceeded when deploying to Heroku

[CruiseMan]

Building on local machine works fine, and takes about 10 seconds, but fails once deployed to Heroku. 2 out of 10 times it success building production build on Heroku, i don't know why.

2018-10-15T19:32:06.251040+00:00 heroku[web.1]: Starting process with command `npm run build && node app.js`
2018-10-15T19:32:09.573768+00:00 app[web.1]: 
2018-10-15T19:32:09.573787+00:00 app[web.1]: > [email protected] build /app
2018-10-15T19:32:09.573789+00:00 app[web.1]: > react-scripts build
2018-10-15T19:32:09.573791+00:00 app[web.1]: 
2018-10-15T19:32:14.133886+00:00 app[web.1]: Creating an optimized production build...
2018-10-15T19:32:41.548599+00:00 heroku[web.1]: Process running mem=600M(117.4%)
2018-10-15T19:32:41.548726+00:00 heroku[web.1]: Error R14 (Memory quota exceeded)
2018-10-15T19:33:06.390664+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-10-15T19:33:06.390664+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-10-15T19:33:06.541622+00:00 heroku[web.1]: Process exited with status 137
2018-10-15T19:33:06.561336+00:00 heroku[web.1]: State changed from starting to crashed
2018-10-15T19:33:06.563135+00:00 heroku[web.1]: State changed from crashed to starting
2018-10-15T19:33:24.413153+00:00 heroku[web.1]: Starting process with command `npm run build && node app.js`

My app.js example

const express = require('express');
const http = require('http');
const path = require('path');
let app = express();

app.use(express.static(path.join(__dirname, 'build')));
const port = process.env.PORT || '3000';
app.set('port', port);
const server = http.createServer(app);
server.listen(port, '0.0.0.0', () => console.log(`Running on localhost:${port}`));

Procfile

web: npm run build && node app.js

[bugzpodder]

try turning GENERATE_SOURCEMAP=false, see https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#advanced-configuration

[CruiseMan]

@bugzpodder I have created .env.production file in root of project directory with next content:

REACT_APP_GENERATE_SOURCEMAP=false

And still getting this an error but at least chances to start raised to 50%/50%

2018-10-15T20:52:22.677292+00:00 heroku[web.1]: Starting process with command `npm run build && node app.js`
2018-10-15T20:52:26.456096+00:00 app[web.1]: 
2018-10-15T20:52:26.456113+00:00 app[web.1]: > [email protected] build /app
2018-10-15T20:52:26.456114+00:00 app[web.1]: > react-scripts build
2018-10-15T20:52:26.456115+00:00 app[web.1]: 
2018-10-15T20:52:30.313482+00:00 app[web.1]: Creating an optimized production build...
2018-10-15T20:52:53.507326+00:00 heroku[web.1]: Process running mem=617M(120.3%)
2018-10-15T20:52:53.507466+00:00 heroku[web.1]: Error R14 (Memory quota exceeded)
2018-10-15T20:53:08.405933+00:00 app[web.1]: Compiled successfully.
2018-10-15T20:53:08.405954+00:00 app[web.1]: 
2018-10-15T20:53:08.406297+00:00 app[web.1]: File sizes after gzip:
2018-10-15T20:53:08.406299+00:00 app[web.1]: 
2018-10-15T20:53:08.442505+00:00 app[web.1]:   147.42 KB  build/static/js/1.df92de49.chunk.js
2018-10-15T20:53:08.442606+00:00 app[web.1]:   19.69 KB   build/static/css/1.2e2a096a.chunk.css
2018-10-15T20:53:08.442703+00:00 app[web.1]:   4.38 KB    build/static/js/main.a752d7c7.chunk.js
2018-10-15T20:53:08.442780+00:00 app[web.1]:   1.11 KB    build/static/css/main.d0d105a7.chunk.css
2018-10-15T20:53:08.442856+00:00 app[web.1]:   763 B      build/static/js/runtime~main.229c360f.js
2018-10-15T20:53:08.442926+00:00 app[web.1]: 
2018-10-15T20:53:08.443242+00:00 app[web.1]: The project was built assuming it is hosted at https://xxx.xxx.com.
2018-10-15T20:53:08.443307+00:00 app[web.1]: You can control this with the homepage field in your package.json.
2018-10-15T20:53:08.443363+00:00 app[web.1]: 
2018-10-15T20:53:08.443404+00:00 app[web.1]: The build folder is ready to be deployed.
2018-10-15T20:53:08.443534+00:00 app[web.1]: You may serve it with a static server:
2018-10-15T20:53:08.443572+00:00 app[web.1]: 
2018-10-15T20:53:08.443774+00:00 app[web.1]:   npm install -g serve
2018-10-15T20:53:08.443864+00:00 app[web.1]:   serve -s build
2018-10-15T20:53:08.443907+00:00 app[web.1]: 
2018-10-15T20:53:08.443940+00:00 app[web.1]: Find out more about deployment here:
2018-10-15T20:53:08.443972+00:00 app[web.1]: 
2018-10-15T20:53:08.444067+00:00 app[web.1]:   http://bit.ly/CRA-deploy
2018-10-15T20:53:08.444074+00:00 app[web.1]: 
2018-10-15T20:53:08.992067+00:00 app[web.1]: Running on port http://localhost:4027
2018-10-15T20:53:09.346658+00:00 heroku[web.1]: State changed from starting to up
2018-10-15T20:53:49.000000+00:00 app[api]: Build started by user [email protected]
2018-10-15T20:55:03.372547+00:00 heroku[web.1]: Restarting
2018-10-15T20:55:03.373395+00:00 heroku[web.1]: State changed from up to starting
2018-10-15T20:55:03.032982+00:00 app[api]: Release v93 created by user [email protected]
2018-10-15T20:55:03.032982+00:00 app[api]: Deploy 76f470a8 by user [email protected]
2018-10-15T20:55:04.032937+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2018-10-15T20:55:04.098406+00:00 heroku[web.1]: Process exited with status 143
2018-10-15T20:55:13.000000+00:00 app[api]: Build succeeded
2018-10-15T20:55:15.025091+00:00 heroku[web.1]: Starting process with command `npm run build && node app.js`
2018-10-15T20:55:18.110357+00:00 app[web.1]: 
2018-10-15T20:55:18.110376+00:00 app[web.1]: > [email protected] build /app
2018-10-15T20:55:18.110378+00:00 app[web.1]: > react-scripts build
2018-10-15T20:55:18.110380+00:00 app[web.1]: 
2018-10-15T20:55:21.946838+00:00 app[web.1]: Creating an optimized production build...
2018-10-15T20:55:56.934733+00:00 heroku[web.1]: Process running mem=621M(121.4%)
2018-10-15T20:55:56.934866+00:00 heroku[web.1]: Error R14 (Memory quota exceeded)
2018-10-15T20:56:15.691818+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
2018-10-15T20:56:15.691818+00:00 heroku[web.1]: Stopping process with SIGKILL
2018-10-15T20:56:16.185232+00:00 heroku[web.1]: State changed from starting to crashed
2018-10-15T20:56:16.165142+00:00 heroku[web.1]: Process exited with status 137

[CruiseMan]

Workaround for me is to add "postinstall": "react-scripts build" to package.json in scripts, but question is still open

[bugzpodder]

There is also https://github.com/facebook/create-react-app/issues/4536#issuecomment-393647911
not sure if it helps on heroku.

[CruiseMan]

@bugzpodder I have tried that as well, did not see much improvements.

[Keksike]

Workaround for me is to add "postinstall": "react-scripts build" to package.json in scripts, but question is still open

If I have understood correctly, this isn't a workaround, but rather the correct way of doing it. The building should be done on postinstall or heroku-postbuild rather than start.

[Timer]

The environment variable is GENERATE_SOURCEMAP not REACT_APP_GENERATE_SOURCEMAP.

[Timer]

But yes, the proper solution is building in postinstall. Better yet, use the heroku-postbuild so this only happens in Heroku.

[CruiseMan]

@Keksike This is the first time in my life workaround ended up being correct solution.
Thanks you @Timer