Heroku server crashes with "JavaScript heap out of memory" when deploying 'react-admin' app

Question

I am currently developing an admin panel using 'react-admin' which works well on my local, but as soon as I upload the app to Heroku, the build fails with the following error: "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory"

I have narrowed down the issue to the initial import { Admin } from 'react-admin'; by setting up a clean project with just the 'react-admin' package and a simple import of Admin. As soon as I try using the component the deploy will fail with a "heap out of memory" error.

Has anybody else encountered this issue?

Here is my package.json:

{   "name": "mrewards_admin",   "version": "0.1.0",   "private": true,   "dependencies": {     "axios": "^0.19.0",     "deepmerge": "^4.2.2",     "prop-types": "^15.7.2",     "react": "^16.12.0",     "react-admin": "^3.0.2",     "react-dom": "^16.12.0",     "react-scripts": "3.2.0"   },   "engines": {     "node": "13.0.1"   },   "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"   },   "eslintConfig": {     "extends": "react-app"   },   "browserslist": {     "production": [       ">0.2%",       "not dead",       "not op_mini all"     ],     "development": [       "last 1 chrome version",       "last 1 firefox version",       "last 1 safari version"     ]   } } 

And here is the Heroku log output:

2019-12-06T00:29:07.000000+00:00 app[api]: Build succeeded 2019-12-06T00:29:10.340460+00:00 heroku[web.1]: State changed from starting to up 2019-12-06T00:29:10.135608+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.103.22/ 2019-12-06T00:29:10.135999+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from / 2019-12-06T00:29:10.136098+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public 2019-12-06T00:29:10.136196+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /index.html 2019-12-06T00:29:10.136405+00:00 app[web.1]: Starting the development server... 2019-12-06T00:29:10.136409+00:00 app[web.1]: 2019-12-06T00:30:46.302146+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/" host=test-react-admin.herokuapp.com request_id=b7cafb3a-311c-4ef2-bd61-cb1f863e69ca fwd="216.81.49.130" dyno=web.1 connect=1ms service=30000ms status=503 bytes=0 protocol=https 2019-12-06T00:30:47.234363+00:00 app[web.1]: 2019-12-06T00:30:47.234390+00:00 app[web.1]: <--- Last few GCs ---> 2019-12-06T00:30:47.234392+00:00 app[web.1]: 2019-12-06T00:30:47.234413+00:00 app[web.1]: [30:0x492c940]    98675 ms: Scavenge 240.7 (257.5) -> 239.8 (257.7) MB, 1.7 / 0.0 ms  (average mu = 0.238, current mu = 0.037) allocation failure 2019-12-06T00:30:47.234415+00:00 app[web.1]: [30:0x492c940]    98685 ms: Scavenge 240.7 (257.7) -> 239.9 (258.0) MB, 1.9 / 0.0 ms  (average mu = 0.238, current mu = 0.037) allocation failure 2019-12-06T00:30:47.234418+00:00 app[web.1]: [30:0x492c940]    98903 ms: Mark-sweep 240.8 (258.0) -> 237.9 (258.0) MB, 211.0 / 0.1 ms  (average mu = 0.350, current mu = 0.474) allocation failure scavenge might not succeed 2019-12-06T00:30:47.234419+00:00 app[web.1]: 2019-12-06T00:30:47.234421+00:00 app[web.1]: 2019-12-06T00:30:47.234422+00:00 app[web.1]: <--- JS stacktrace ---> 2019-12-06T00:30:47.234423+00:00 app[web.1]: 2019-12-06T00:30:47.234426+00:00 app[web.1]: ==== JS stack trace ========================================= 2019-12-06T00:30:47.234427+00:00 app[web.1]: 2019-12-06T00:30:47.234429+00:00 app[web.1]: 0: ExitFrame [pc: 0x1374fd9] 2019-12-06T00:30:47.234431+00:00 app[web.1]: Security context: 0x2a1cf61808a1 <JSObject> 2019-12-06T00:30:47.234433+00:00 app[web.1]: 1: _next2(aka _next2) [0x2546e8465cf9] [0x1b716e9004a9 <undefined>:~21] [pc=0x1d633e40a0e8](this=0x1b716e9004a9 <undefined>) 2019-12-06T00:30:47.234440+00:00 app[web.1]: 2: /* anonymous */(aka /* anonymous */) [0x2546e8465ea1] [0x1b716e9004a9 <undefined>:46] [bytecode=0x6238003a241 offset=37](this=0x1b716e9004a9 <undefined>,0x1b716e9004a9 <undefined>,0x1b716e9004a9 <undefined>) 2019-12-06T00:30:47.234441+00:00 app[web.1]: 3: _next1(aka _ne... 2019-12-06T00:30:47.234443+00:00 app[web.1]: 2019-12-06T00:30:47.234445+00:00 app[web.1]: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 2019-12-06T00:30:47.234453+00:00 app[web.1]: 2019-12-06T00:30:47.245340+00:00 app[web.1]: Writing Node.js report to file: report.20191206.003047.30.0.001.json 2019-12-06T00:30:47.245345+00:00 app[web.1]: Node.js report completed 2019-12-06T00:30:47.245828+00:00 app[web.1]: 1: 0x9da7c0 node::Abort() [node] 2019-12-06T00:30:47.246377+00:00 app[web.1]: 2: 0x9db976 node::OnFatalError(char const*, char const*) [node] 2019-12-06T00:30:47.246963+00:00 app[web.1]: 3: 0xb39f1e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node] 2019-12-06T00:30:47.247418+00:00 app[web.1]: 4: 0xb3a299 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node] 2019-12-06T00:30:47.247992+00:00 app[web.1]: 5: 0xce5635  [node] 2019-12-06T00:30:47.248561+00:00 app[web.1]: 6: 0xce5cc6 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node] 2019-12-06T00:30:47.249102+00:00 app[web.1]: 7: 0xcf1b5a v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node] 2019-12-06T00:30:47.249627+00:00 app[web.1]: 8: 0xcf2a65 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node] 2019-12-06T00:30:47.250190+00:00 app[web.1]: 9: 0xcf5478 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [node] 2019-12-06T00:30:47.250701+00:00 app[web.1]: 10: 0xcbbda7 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType) [node] 2019-12-06T00:30:47.251301+00:00 app[web.1]: 11: 0xff1e0b v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node] 2019-12-06T00:30:47.251959+00:00 app[web.1]: 12: 0x1374fd9  [node] 2019-12-06T00:30:47.285408+00:00 app[web.1]: npm ERR! code ELIFECYCLE 2019-12-06T00:30:47.285920+00:00 app[web.1]: npm ERR! errno 1 2019-12-06T00:30:47.287473+00:00 app[web.1]: npm ERR! [email protected] start: `react-scripts start` 2019-12-06T00:30:47.287759+00:00 app[web.1]: npm ERR! Exit status 1 2019-12-06T00:30:47.288057+00:00 app[web.1]: npm ERR! 2019-12-06T00:30:47.288300+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script. 2019-12-06T00:30:47.288528+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 2019-12-06T00:30:47.295555+00:00 app[web.1]: 2019-12-06T00:30:47.295669+00:00 app[web.1]: npm ERR! A complete log of this run can be found in: 2019-12-06T00:30:47.295759+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2019-12-06T00_30_47_289Z-debug.log 2019-12-06T00:30:47.344869+00:00 heroku[web.1]: Process exited with status 1 2019-12-06T00:30:47.369971+00:00 heroku[web.1]: State changed from up to crashed 

Thank you!

Answer 1

Contacted heroku support, here I solved the issue:

The error has occurred because the node can only address 1.5GB of memory before hitting the JavaScript heap out of memory error, a default limit that it inherits from the V8 engine. We tweak this default setting on Heroku through the NODE_OPTIONS env var so that the process can address all of the memory available: https://github.com/heroku/heroku-buildpack-nodejs/blob/master/lib/environment.sh#L29-L33

One option would be to specifically call --max_old_space_size=2560 when invoking node to see if that helps alleviate the issue. You can pass that option to Node via environment variable by running the following:

$ heroku config:set NODE_OPTIONS="--max_old_space_size=2560" -a [app_name] 

Also adjust the build script to be:

"scripts": {     "start": "node --max_old_space_size=2560 node_modules/.bin/react-scripts start",     "build": "node --max_old_space_size=2560 node_modules/.bin/react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"   } 

Though not really sure build and start scripts change impacting.

Answer 2

The only way I was able to make this work was by upgrading to a paid dyno and changing the scripts in my package.json to:

"scripts": {     "start": "node --max_old_space_size=2048 node_modules/.bin/react-scripts start",     "build": "node --max_old_space_size=2048 node_modules/.bin/react-scripts build",     "test": "react-scripts test",     "eject": "react-scripts eject"   } 

Not sure if the script changes were needed. During deployment the memory usage jumps above 1Gb