create-react-app: Call and entry last allocation Failed - JS heap out of memory

Description

Recently we included the resin-sdk within our React app, which is causing the npm run build command to emit this error:

> node --max_old_space_size=4096 node_modules/.bin/react-scripts build

Creating an optimized production build...

<--- Last few GCs --->

  130490 ms: Mark-sweep 1260.1 (1434.9) -> 1252.3 (1434.9) MB, 1406.1 / 0.0 ms [allocation failure] [GC in old space requested].
  131817 ms: Mark-sweep 1252.3 (1434.9) -> 1252.3 (1434.9) MB, 1326.8 / 0.0 ms [allocation failure] [GC in old space requested].
  133121 ms: Mark-sweep 1252.3 (1434.9) -> 1256.7 (1404.9) MB, 1303.9 / 0.0 ms [last resort gc].
  134431 ms: Mark-sweep 1256.7 (1404.9) -> 1261.2 (1403.9) MB, 1310.2 / 0.0 ms [last resort gc].


<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 0x3efcb5dcfb51 <JS Object>
    2: _serializeMappings(aka SourceMapGenerator_serializeMappings) [/Users/BioBots/Desktop/biobots-ui/node_modules/uglify-js/node_modules/source-map/lib/source-map-generator.js:~291] [pc=0x34db68761182] (this=0x2e79658e3189 <a SourceMapGenerator with map 0x15785ca99ce9>)
    3: toJSON(aka SourceMapGenerator_toJSON) [/Users/BioBots/Desktop/biobots-ui/node_modules/uglify-js/node_modules/source-m...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [/usr/local/bin/node]
 2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/usr/local/bin/node]
 3: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
 4: v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/usr/local/bin/node]
 5: v8::internal::Runtime_AllocateInTargetSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
 6: 0x34db64b079a7
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! biobots-ui2@0.1.0 build: `node --max_old_space_size=4096 node_modules/.bin/react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the biobots-ui2@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

When we removed the resin-sdk from the code, it built just fine, which made me look into increasing the memory allocation. After doing quite a bit of research, I tried increasing the old space size with: node --max_old_space_size=4096 node_modules/.bin/react_scripts build, but based on the output, it seems like the allocated space has not increased.

Expected behavior

Perhaps I’m misunderstanding, or not executing this correctly, but I’d expect that when arguments are passed into the react-script, it takes them into account when executing the build.

Actual behavior

Whether I input extra parameters or not, I end up with the same output error when building production code.

Environment

Run these commands in the project folder and fill in their results:

npm ls react-scripts (if you haven’t ejected): react-scripts@1.0.7
node -v: v6.9.4
npm -v: 5.0.3

Then, specify:

Operating system: Mac OS Sierra V 10.12.15
Browser and version: Safari 10.1.1

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 12
Comments: 35 (18 by maintainers)

Most upvoted comments

Thanks sourcemap: false in webpack.config.prod.js really worked for me

abhisheksdm on Oct 17, 2018

export NODE_OPTIONS=--max_old_space_size=4096 this can help…

yjb94 on Jul 25, 2018

Disabling UglifyJS’ sourceMap in webpack.config.prod.js makes the build run successfully, at least on my public repo on react-scripts @ 0.9.5. Using this on react-scripts @ 1.0.10 still fails though.

Can you all dive to node_modules/react-scripts/weback.config.prod.js and edit the UglifyJS section to this and confirm that this helps?

    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        // Disabled because of an issue with Uglify breaking seemingly valid code:
        // https://github.com/facebookincubator/create-react-app/issues/2376
        // Pending further investigation:
        // https://github.com/mishoo/UglifyJS2/issues/2011
        comparisons: false,
      },
      output: {
        comments: false,
        // Turned on because emoji and regex is not minified properly using default
        // https://github.com/facebookincubator/create-react-app/issues/2488
        ascii_only: true,
      },
      sourceMap: false,
    }),

The only thing that is different from latest CRA version is sourceMap: false. This would mean that you will deploy without source map though.

viankakrisna on Jul 9, 2017

Cool, so based on the responses here, I managed to solve the issue on my end. Yeah as everyone said, it was due to the size of the project, not due to resin-sdk. It just happened to be the last package that really put us over the top.

The error message that popped up when the project was over the size recommendation, but under the size necessary to crash helped tremendously in solving the issue:

Creating an optimized production build… Compiled successfully.

File sizes after gzip:

1.5 MB (-2.09 KB) build/static/js/main.6dab79dd.js 356.69 KB build/static/js/0.332a33a2.chunk.js 5.91 KB build/static/css/main.0523290b.css

The bundle size is significantly larger than recommended. Consider reducing it with code splitting: https://goo.gl/9VhYWB You can also analyze the project dependencies: https://goo.gl/LeUzfb

For anyone else still trying to fix this issue, we used the Reduce Dependencies as a guide for what the largest files were and then used Code Splitting to isolate said files. This helped us create multiple smaller files, which ultimately led to a successful build.

Is it at all possible when the build fails due to the memory issue, to display the above error message instead? That would’ve been really helpful in fixing the problem

kadhirvelm on Jul 13, 2017

You can now disable sourcemaps via setting GENERATE_SOURCEMAP=false. This was released in react-scripts v1.0.11.

I’ll close this as the solution for now will be to disable source maps or implement code splitting via import(). Cheers!

Timer on Aug 9, 2017