React-native bundler stuck

Question

Edit

I think the problem comes from the fact that the bundler is lacking memory:

transform[stderr]: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]

Temporary solution

I found a decent solution, instead of running react-native start I run the following, which allows to increase the memory limit:

node --max-old-space-size=8192 node_modules/react-native/local-cli/cli.js start

I'm still very curious about why the default allocated memory isn't enough to process my files.

Detailed description of the problem

When I run react-native start, bundling always get stuck at the exact same location:

Loading dependency graph, done.
 BUNDLE  [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 98.6% (842/848)

After about ~30s the client (my phone or the simulator, both on ios) crashes and basically says it couldn't connect to development server. The bundle process never crashes and it remain at that stage even after the client crashed.

Is there any way I can find why this is happening? I've tried to add --verbose to my command, but it has no effect. I'm a bit confused as this worked a few hours before, and it suddenly did this even though I didn't install anything new. I've tried many already like rebooting/cleaning the cache/removing and reinstalling my node modules/….

Just in case that has something to do with my installation:

$ react-native info

  React Native Environment Info:
    System:
      OS: macOS 10.14
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 2.50 GB / 16.00 GB
      Shell: 4.4.12 - /usr/local/bin/bash
    Binaries:
      Node: 8.9.4 - /usr/local/bin/node
      Yarn: 1.3.2 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.8 => 16.8.6
      react-native: ^0.59.2 => 0.59.2
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

I also have some very large .js files (>9M), I don't know if that can be causing this.

Sometimes the bundler crashes with the following output:

transform[stdout]:
transform[stdout]: <--- Last few GCs --->
transform[stdout]:
transform[stdout]: [6180:0x102801000]   945611 ms: Mark-sweep 1410.8 (1546.2) -> 1410.8 (1530.2) MB, 5646.2 / 0.0 ms  (+ 0.0 ms in 0 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 5646 ms) last resort GC in old space requested
transform[stdout]: [6180:0x102801000]   951930 ms: Mark-sweep 1410.8 (1530.2) -> 1410.8 (1530.2) MB, 6318.4 / 0.0 ms  last resort GC in old space requested
transform[stdout]:
transform[stdout]:
transform[stdout]: <--- JS stacktrace --->
transform[stdout]:
transform[stdout]: ==== JS stack trace =========================================
transform[stdout]:
transform[stdout]: Security context: 0xf7793325ee1 <JSObject>
transform[stdout]:     1: visit [/node_modules/@react-native-community/cli/node_modules/@babel/traverse/lib/path/context.js:~75] [pc=0x2945f0d9fcbf](this=0xf7789523021 <NodePath map = 0xf773909f479>)
transform[stdout]:     2: visitQueue [/node_modules/@react-native-community/cli/node_modules/@babel/traverse/lib/context.js:~96] [pc=0x2945f0d9d88d](this=0xf77b18e35c1 <...
transform[stdout]:
transform[stderr]: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
transform[stderr]:  1: node::Abort() [/usr/local/bin/node]
transform[stderr]:  2: node::FatalException(v8::Isolate*, v8::Local<v8::Value>, v8::Local<v8::Message>) [/usr/local/bin/node]
transform[stderr]:  3:
transform[stderr]: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [/usr/local/bin/node]
transform[stderr]:  4:
transform[stderr]: v8::internal::Factory::NewStruct(v8::internal::InstanceType) [/usr/local/bin/node]
transform[stderr]:  5:
transform[stderr]: v8::internal::Factory::NewTuple3(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [/usr/local/bin/node]
transform[stderr]:  6:
transform[stderr]: v8::internal::LoadIC::UpdateCaches(v8::internal::LookupIterator*) [/usr/local/bin/node]
transform[stderr]:  7: v8::internal::LoadIC::Load(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Name>) [/usr/local/bin/node]
transform[stderr]:  8:
transform[stderr]: v8::internal::KeyedLoadIC::Load(v8::internal::Handle<v8::internal::Object>, v8::internal::Handle<v8::internal::Object>) [/usr/local/bin/node]
transform[stderr]:  9:
transform[stderr]: v8::internal::Runtime_KeyedLoadIC_Miss(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/local/bin/node]
transform[stderr]: 10: 0x2945f0b8463d

Answer 1

First, resolve possible errors related dependencies and react native config

Make sure that you did not get any error in the server while changing the code in index.android.js. / index.ios.js

Make sure the port you want to apply react-native is not blocked by other processes

• Try to close the server.
• run react-native start --reset-cache
• reload the app.

Answer 2

this may happen when allocated memory is not enough. I have done many steps to fix this which all are worthless to me. Some of those are,

1. resetting cache (react-native start --reset-cache.)
2. trying to remove some packages and files.
3. removing node_modules & package-lock.json and then try "npm install"

but I finally figured out how to increase max_old_space_size. (I had been developing an android app). it works for me.

What is max_old_space_size?

React native has to start a Node server for transforming javascript files to something else. Following, there much be a place to store things, right? Yes, and the size of that place is defined using… our friend: “max_old_space_size”. Let’s understand it as simply as we can. If the size is too small, we do not have enough space to breathe and we die. Our Node server behaves like that too.

How to increase max_old_space_size

1. Add the following lines to your "project.ext.react" array of build.Gradle which is in your app folder(Android->App->build.Gradle)

entryFile:"index.js", nodeExecutableAndArgs:["node","--max-old-space-size=8192"

so, now project.ext.react should be seen like this,

project.ext.react = [ entryFile:"index.js", nodeExecutableAndArgs:["node","--max-old-space-size=8192"] ]

Now, you have the Node server running with a space size of 8GB. You can replace the number “8192” with any number you like

note - Increase the max_old_space_size can solve the problem. However, we should pay attention to our laptop or desktop RAM before increasing it. If you have 16GB RAM, 8GB space size would be safe. If you have 8GB RAM, then try the lower space for safe.

2. Remove node_modules and give "npm install"

check this link for more details.

Thanks in Advance!