[Metro Bundler] Maximum call stack size exceeded (when upgrading to 0.50.1)

[jamsch]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment:
  OS: Linux 4.10
  Node: 8.9.0
  Yarn: 1.3.2
  npm: 5.5.1
  Watchman: 4.1.0
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: ^16.0.0 => 16.0.0
  react-native: ^0.50.1 => 0.50.1


Target Platform: iOS (10.3) & Android (targetSdkVersion 22)

Steps to Reproduce

Just upgraded from 0.49.5 to 0.50.1 and tried to bundle. The breaking changes in the new release hadn't affected my app and shouldn't have affected the build process.

1. npm i react-native@0.50.1
2. react-native bundle --verbose --platform android --dev false --entry-file index.js --bundle-output output.bundle

Output:

Scanning folders for symlinks in /home/james/Documents/react-native-app/node_modules (5ms)
Scanning folders for symlinks in /home/james/Documents/react-native-app/node_modules (7ms)
Loading dependency graph, done.

Maximum call stack size exceeded
[Error]  "react-native bundle" command exited with code 1.

On the other hand when I reinstalled react-native 0.49.5:

1. npm install react-native@0.49.5
2. react-native bundle --verbose --platform android --dev false --entry-file index.js --bundle-output output.bundle

Output:

Scanning folders for symlinks in /home/james/Documents/react-native-app/node_modules (5ms)
Scanning folders for symlinks in /home/james/Documents/react-native-app/node_modules (13ms)
Loading dependency graph, done.
bundle: start
bundle: finish
bundle: Writing bundle output to: output.bundle
bundle: Done writing bundle output
Assets destination folder is not set, skipping...

What does work

Running react-native start (i.e. developer mode) works fine

Expected Behavior

The project should bundle correctly

Actual Behavior

The bundling fails with a stack overflow. There's no clear indication what is causing the behavior because there's no stack trace despite explicitly enabling verbose mode. I don't know whether stack traces of these errors are kept but it may be helpful in identifying the problem.

I upgraded Node (from v6 to v8) because I thought that may be causing it.

Installed packages

├── axios@0.17.0
├── babel-cli@6.26.0
├── UNMET PEER DEPENDENCY babel-eslint@8.0.1
├── babel-preset-es2015@6.24.1
├── babel-preset-flow@6.23.0
├── babel-preset-react-native@4.0.0
├── eslint@4.10.0
├── eslint-config-airbnb@16.1.0
├── eslint-config-react-app@2.0.1
├── eslint-plugin-flowtype@2.39.1
├── eslint-plugin-import@2.8.0
├── UNMET PEER DEPENDENCY eslint-plugin-jsx-a11y@6.0.2
├── eslint-plugin-react@7.4.0
├── eslint-plugin-react-native@3.1.0
├── flow-bin@0.58.0
├── immutable@4.0.0-rc.7
├── jest@21.2.1
├── prettier-eslint@8.2.1
├── prop-types@15.6.0
├── react@16.0.0
├── react-dom@16.0.0
├── react-native@0.50.1
├── react-native-code-push@5.1.3-beta
├── react-native-htmlview@0.12.1
├── react-native-keyboard-aware-scrollview@1.1.7 (git+https://github.com/jamsch/react-native-keyboard-aware-scrollview.git#5575b8c31df341c1719630fe2c7c08c171477243)
├── react-native-music-control@0.4.12
├── react-native-offline@3.4.0
├── react-native-popup-menu@0.9.0
├── react-native-sentry@0.30.2
├── react-native-sound@0.10.4
├── react-native-swiper@1.5.13
├── react-native-vector-icons@4.4.2
├── react-native-version-up@1.0.7
├── react-native-video@2.0.0
├── react-native-video-player@0.8.5
├── react-native-voice@0.2.5
├── react-navigation@1.0.0-beta.19
├── react-redux@5.0.6
├── react-test-renderer@16.0.0
├── redux@3.7.2
├── redux-devtools-extension@2.13.2
├── redux-persist@5.2.2
├── redux-saga@0.16.0
├── reselect@3.0.1
├── rimraf@2.6.2
├── shortid@2.2.8

[sibelius]

this is happening on android

[sibelius]

this is happening on node 6 and also node 8

with android and ios

with react-native 50 and also 50.1

[adbl]

Also seeing this 😕

[adbl]

Setting the --dev true makes the bundle suceed.

[JCMais]

@adbl can you share your deps?

[jamsch]

I took the time to uninstall pretty much every package in my large project until I was left with the following:

react-native-app@0.6.7 /home/james/Documents/react-native-app
├── react@16.0.0
├── react-dom@16.0.0
├── react-native@0.50.1

(I also poly-filled the missing imports)
The error still occurs with only these packages installed.

What's unusual is that I also tried a react-native init project and that bundled fine. Has this got something to do with the project size?

Anyways, I'll be sticking to 0.49.5 for the time being until I can find out why this is happening.

[jamsch]

I think that I may have found the problem. One of my unused recursive functions in the project seem to be causing the bundling error.

The unusual thing I found is that if the function was called it would bundle correctly. Otherwise there's a stack overflow. This only affects non-dev bundles.

function isFirstChild(parentNode, childNode) {
  if (!parentNode || !childNode || !parentNode.children || !parentNode.children.length === 0) return false;

  if (parentNode.children[0] === childNode) return true;

  return isFirstChild(parentNode.children[0], childNode);
}

Also changing the function to a const arrow function seems to work.

const isFirstChild = (parentNode, childNode) => {
  if (!parentNode || !childNode || !parentNode.children || !parentNode.children.length === 0) return false;

  if (parentNode.children[0] === childNode) return true;

  return isFirstChild(parentNode.children[0], childNode);
}

So my theory is that updates to the metro bundler cli between react-native 0.49.5 and 0.50.1 now cause stack overflows when bundling files that contain an unreferenced recursive function.

[adbl]

@jamsch I have been struggling with this issue too now for quite some time. How were you able to point the problem to this little function?

Btw, it took me like two hours to figure out out that setting DEBUG=Metro:* in environment gave me debug logs when running bundler, should be mentioned in docs somewhere I think. But it doesn't give me any information in which function it crashes so not so helpful anyway.

[jamsch]

@adbl I started adding/removing module includes starting from the app root until I narrowed down a specific file.

Even though it bundles successfully, the app unfortunately now instantly crashes in production mode, while dev mode is still fine. I can't tell what's wrong because obviously the bundle is minified and I'm left with the error:

com.facebook.react.common.JavascriptException: undefined is not an object (evaulating 'e.length'), stack:
<unknown>@382.132
<unknown>@382:196
exports@382:395
...

I'll be sticking with 0.49.5 for now.

[adbl]

Yeah, I'm about to give up for now too. I suspect it could be related to minification and saw this commit which could be related: facebook/metro@367a5f5

[adbl]

Ok, so in our case when I comment out everything from App.react.js it bundles, but when I add back imports for just @expo/ex-navigation it fails, so if fails something there.

[adbl]

Yep, here is the code causing trouble in ex-navigation: src/ExNavigationRouter.js:

function _isSerializable(obj: Object): boolean {
  if (
    _.isUndefined(obj) ||
    _.isNull(obj) ||
    _.isBoolean(obj) ||
    _.isNumber(obj) ||
    _.isString(obj)
  ) {
    return true;
  }

  if (!_.isPlainObject(obj) && !_.isArray(obj)) {
    return false;
  }

  for (var key in obj) {
    if (!_isSerializable(obj[key])) {
      return false;
    }
  }

  return true;
}

Which is referenced conditionally only if __DEV__ which I guess transformed away per the commit I referenced in my previous comment.

And yes, the bundle doesn't fail if changing it to:

function _isSerializable = function(obj: Object): boolean {
...

[adbl]

Going a bit deeper, I now have a minified production jsbundle which crashes inside what I think is minified regenerator-runtime:

ReferenceError: record is not defined
    at Generator._invoke (http://localhost:8081/index.bundle?platform=ios&dev=true&minify=true:67:931)

the crashing minified code is:

if(o=b,"normal"===(record=n(t,r,e)).type){o=e.done?j:E;var f={value:record.arg,done:e.done};

I think this is here: https://github.com/facebook/regenerator/blob/9b6ebc0532ff373e06e3421b26800ac8979913d3/packages/regenerator-runtime/runtime.js#L300

Shouln't more people have this problem, I thought async/await was used widely by now?