Call and entry last allocation Failed - JS heap out of memory

[kadhirvelm]

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! [email protected] 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 [email protected] 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:

1. npm ls react-scripts (if you haven’t ejected): [email protected]
2. node -v: v6.9.4
3. npm -v: 5.0.3

Then, specify:

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

[viankakrisna]

have you tried adding/increasing swap space? https://github.com/facebookincubator/create-react-app/blob/67f6163b0d86a2980fbaba5ec931fa27abad2f99/packages/react-scripts/template/README.md#npm-run-build-silently-fails

It is reported that npm run build can fail on machines with no swap space, which is common in cloud environments. If the symptoms are matching, consider adding some swap space to the machine you’re building on, or build the project locally.

[kadhirvelm]

So this error pops up when I'm building locally and if I'm not mistaken, the macOS already allocates it automatically (https://apple.stackexchange.com/questions/190892/why-is-my-macbook-pro-already-using-swap-memory). Is there anything else I could try to get it to build?

[viankakrisna]

Try downgrading npm to 4 or 3, delete node_modules and rerun npm install.

[kadhirvelm]

Hum, I got the exact same error again with both npm 3 and 4.

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: 0x24c5d2f079a7

Does react-scripts adjust the max_old_space_size when I input a value for it? I noticed when I made it 10 vs when I made it a 10000, it didn't make any visible difference.

[gaearon]

It would help if you provided a project reproing this. I guess it's probably not likely you can, but still.

[billscheidel]

I'm seeing the same thing since I updated to the latest create-react-app release (I was on a build from January previously). I don't have resin-sdk and haven't added any other new packages to my project. I'm running in a VM with 2GB of free memory and 4GB free swap. I'm getting it about once a day, immediately restarting using yarn start works as expected. Using the same exact environment, I never hit this with the older create-react-app build.

Sorry I can't provide more details, but just wanted to indicate that this isn't a one off machine issue.

<--- Last few GCs --->

134418596 ms: Mark-sweep 1372.8 (1422.4) -> 1363.0 (1425.4) MB, 227.2 / 0.0 ms [allocation failure] [GC in old space requested].
134418849 ms: Mark-sweep 1363.0 (1425.4) -> 1363.0 (1426.4) MB, 252.8 / 0.0 ms [allocation failure] [GC in old space requested].
134419118 ms: Mark-sweep 1363.0 (1426.4) -> 1362.7 (1388.4) MB, 269.4 / 0.0 ms [last resort gc].
134419356 ms: Mark-sweep 1362.7 (1388.4) -> 1362.6 (1388.4) MB, 237.8 / 0.0 ms [last resort gc].


<--- JS stacktrace --->

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

Security context: 0x28dc39dcfb39 <JS Object>
    1: DoJoin(aka DoJoin) [native array.js:~129] [pc=0x2d83d331c513] (this=0x28dc39d04381 <undefined>,w=0x304f02d20fa9 <JS Array[2]>,x=2,N=0x28dc39d043c1 <true>,J=0x28dc39d04411 <String[0]: >,I=0x28dc39db46c9 <JS Function ConvertToString (SharedFunctionInfo 0x28dc39d52dc9)>)
    2: Join(aka Join) [native array.js:180] [pc=0x2d83cd6ecd32] (this=0x28dc39d04381 <undefined>,w=0x304f02d20fa9 <JS Arr...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: node::Abort() [node]
 2: 0x10d2fbc [node]
 3: v8::Utils::ReportApiFailure(char const*, char const*) [node]
 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [node]
 5: v8::internal::Factory::NewRawTwoByteString(int, v8::internal::PretenureFlag) [node]
 6: v8::internal::Runtime_StringBuilderConcat(int, v8::internal::Object**, v8::internal::Isolate*) [node]
 7: 0x2d83c1e092a7

Environment

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

npm ls react-scripts (if you haven’t ejected): [email protected]
node -v: v6.10.2
npm -v: 3.10.10

Then, specify:

Operating system: Ubuntu 16.04
Browser and version: Chrome 59.0.3071.109

[gaearon]

A project reproducing this would still be helpful. Maybe Webpack is hitting some edge condition or there's a particular pattern that causes over allocation.

[billscheidel]

Understand, I just can't reproduce with any regularity. Thought it was a function of number of rebuilds, but can't get it to reproduce at all with a reduced project even after 1000s of rebuilds. Anything I can enable locally to help debug when I do hit it?

[gaearon]

Maybe @sokra or @TheLarkInn have ideas on debugging ooms.

[kadhirvelm]

Okay, created a project that can reproduce the error with regularity. Issue is that it's got some company-specific things in there, so I've made it private. Happy to add anyone as a collaborator. Added @gaearon and @viankakrisna

[gphilipp]

@gaearon @viankakrisna I'm also struck with this issue. I have a 4.4MB index.ios.js file (transpiled from ClojureScript to JS). Can you remove the low-priory-need-more-information label now that @kadhirvelm submitted a project for repro ?

[viankakrisna]

I'm digging on this issue and can replicate the problem on the private repo with this environment:

react-scripts 1.0.10
node v6.10.3
npm 3.10.10

2011 Macbook Pro, i7, 16GB RAM, macOS Sierra 10.12.5

Disabling UglifyJS plugin in react-scripts/config/webpack.config.prod.js makes the build run successfully. Will dig more if some setting is causing it.

It surely helps if anybody having this issue can make a public repo with a reduced example. given enough eyeballs, all bugs are shallow

It's not specific to resin-sdk AFAIK, tested it with fresh CRA generated app and it builds correctly.

[viankakrisna]

Possibly related:
mishoo/UglifyJS#2113

It seems that this issue is affecting builds with a large size of source files.

Possible workaround:

1. Testing it with other versions of node
2. Use code splitting
3. Eject and use DLL webpack plugin

• added after the discussion

4. Disable UglifyJS Source Map
5. Use public folder for large source files

[viankakrisna]

Btw, can you all replicate this problem with react-scripts 0.9.5? I think 1.x.x uses more memory based on #2555 (comment)

[viankakrisna]

Same error on the private repo using react-scripts @ 0.9.5, I guess it's UglifyJS specific error.

[viankakrisna]

@gaearon what we can do here is to fail gracefully, but I do not know how to fail gracefully from a crash like this.

Maybe we can run webpack in a separate process and parse the error message?

[gaearon]

Do I understand correctly that everyone who experienced this issue so far had large source files?

[billscheidel]

I have lots of source files, totaling 1.33MB minified. Single largest source file is 105 kB.

[viankakrisna]

Public repo for reproducing case:
https://github.com/viankakrisna/cra-large-files
src/App.js is stupendously 6.9MB
It always fails npm run build on my laptop

[gaearon]

Single largest source file is 105 kB.

Is it in the src folder? Just curious—is it really written by hand? Why is it so large? Or is it a library?

[billscheidel]

Currently yes, it's in the src folder. It's basically a cache of SVG fragments that is used to build the graphics and icons that we need. It doesn't minify well at all, but compresses down to almost nothing so we didn't have a real reason to create a separate chunk for it yet.

[pesterhazy]

To add another voice, all ClojureScript developers are affected by this, as the ClojureScript compiler (along with Google Closure) produces a single large bundle (could be 4 MB or larger) that needs to be further processed by the RN packager

[viankakrisna]

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.

[gaearon]

@billscheidel

Would it be acceptable to you to pull this file out of src so it doesn’t need to be uglified? For example you could put it in public folder and then add a <script> tag to the index.html.

[gaearon]

@pesterhazy

I’m not fully following. Is this related to Create React App? Your concern sounds specific to React Native. Would the workaround I described in last comment (public folder) work for you?

[pesterhazy]

Sorry, I misread the issue and thought it was about the RN packager itself. Please ignore my comment. To the best of my knowledge, create-react-app isn't used with ClojureScript very often yet.

[billscheidel]

@gaearon

Yes, if that's what is causing the issue. I can pull out the bulk of the file and put it in the public folder instead. The file size must be right on the edge, because it mostly works except when it doesn't.

[kadhirvelm]

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

[viankakrisna]

Maybe instead of spawning we can do forking here so we can detect any error message early without parent killed when the child crash

But I don't know how to parse stdout programmatically using a fork... Googling only shows how to do ipc messaging / regular spawn.

[Timer]

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!

[sujitpk-perennial]

I have a large file of size 31MB in the app. on npm start I got this error
fatal error : call_and_retry_last allocation failed - javascript heap out of memory

[yjb94]

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

[sujitpk-perennial]

@yjb94
I have used following commands to create a build with large files. This is working as expected. Only the thing is I am not able to debug.

1. For iOS
   node --expose-gc --max_old_space_size=4096 ./node_modules/react-native/local-cli/cli.js bundle --entry-file ./index.ios.js --platform ios --dev false --bundle-output "ios/main.jsbundle" --assets-dest "ios" --reset-cache

2. For Android
   node --expose-gc --max_old_space_size=4096 ./node_modules/react-native/local-cli/cli.js bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

[abhisheksdm]

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

[ugaxm]

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

worked for me too