Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jamsch opened this issue Nov 6, 2017 · 43 comments
Closed
Labels
Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@jamsch
Copy link
Contributor

jamsch commented Nov 6, 2017

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
@jamsch jamsch changed the title [Bundler CLI] Maximum call stack size exceeded (when upgrading to 0.50.1) [Metro Bundler] Maximum call stack size exceeded (when upgrading to 0.50.1) Nov 6, 2017
@sibelius
Copy link

sibelius commented Nov 6, 2017

this is happening on android

@sibelius
Copy link

sibelius commented Nov 6, 2017

this is happening on node 6 and also node 8

with android and ios

with react-native 50 and also 50.1

@adbl
Copy link
Contributor

adbl commented Nov 6, 2017

Also seeing this 😕

@adbl
Copy link
Contributor

adbl commented Nov 6, 2017

Setting the --dev true makes the bundle suceed.

@JCMais
Copy link

JCMais commented Nov 6, 2017

@adbl can you share your deps?

@jamsch
Copy link
Contributor Author

jamsch commented Nov 6, 2017

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
Copy link
Contributor Author

jamsch commented Nov 6, 2017

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
Copy link
Contributor

adbl commented Nov 7, 2017

@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
Copy link
Contributor Author

jamsch commented Nov 7, 2017

@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
Copy link
Contributor

adbl commented Nov 7, 2017

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
Copy link
Contributor

adbl commented Nov 7, 2017

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
Copy link
Contributor

adbl commented Nov 7, 2017

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
Copy link
Contributor

adbl commented Nov 7, 2017

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?

@nim23
Copy link

nim23 commented Nov 7, 2017

I am also seeing issues when trying to get a production build with 0.50.1. I tried unmangling the minified bundle and traced where the error was coming from. One of the dependencies was pulling in https://github.com/Qix-/color-convert/blob/master/route.js and when the code went through the minification process, the models variable was undefined and the app crashed when trying to access the property of the undefined. Looks like there are some issues with how the js bundle is being minified for the production build. Maybe fixing metro-bundler to a previous release would work for now. Not sure.

@adbl
Copy link
Contributor

adbl commented Nov 7, 2017

Trying previous versions of metro-bundler.
0.19.0 has the same problem.
0.18.0 fails to bundle, I'm guessing not compatible with RN 0.50.1.

I think this commit is causing all the trouble: facebook/metro@ad927b9#diff-126ae02fbbc88cd17236fb9fc425c6e5 upgrading to uglify-es. Here is an uglify bug which coule be the one causing the bundling issues described initially: mishoo/UglifyJS#2442

Let me know if there is anything else I can to, we are depending on v0.50.1 to fix iPhone X support in our app (SafeAreaView).

@adbl
Copy link
Contributor

adbl commented Nov 7, 2017

Wohoo, I hacked yarn.lock to make metro-bundler use uglify-es@3.1.8 and the minified bundle doesn't crash.

@sibelius
Copy link

sibelius commented Nov 7, 2017

@adbl great work, could you share you small fix?

@adbl
Copy link
Contributor

adbl commented Nov 7, 2017

@sibelius so in yarn.lock, should say:

uglify-es@^3.1.0:
  version "3.1.8"
  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.1.8.tgz#2f21a56871d6354dcc21469cc034c3967f14c5b1"
  dependencies:
    commander "~2.11.0"
    source-map "~0.6.1"

rather than 3.1.7, but I also installed uglify-es manually first and messed around in node_modules to actually make it so. I think if you change this in yarn.lock and yarn remove react-native && yarn add react-native should do the trick?

@aparedes
Copy link
Contributor

aparedes commented Nov 7, 2017

@adbl you could also use yarns resolutions in your package json

"resolutions": {
        "uglify-es": "3.1.8"
}

I did that after seeing your comment that the problem was uglify-es

facebook-github-bot pushed a commit to facebook/metro that referenced this issue Nov 7, 2017
Summary:
**Summary**

Minification fails or minified bundle may crash due to uglify-es bugs which have been fixed recently. See facebook/react-native#16689

**Test plan**

Try to production bundle a project using ex-navigation, which fails with:
```
Maximum call stack size exceeded
```

Use this patch and see that bundling suceeds. There are also minified runtime errors solved by this change, see facebook/react-native#16689 for more information.
Closes #85

Reviewed By: mjesun

Differential Revision: D6259177

Pulled By: rafeca

fbshipit-source-id: 55987eb338b06938181c0da74d104d23eeb135b6
@grabbou
Copy link
Contributor

grabbou commented Nov 7, 2017

I believe the fix has landed in Metro Bundler with version 0.20.1. Can you try using it with https://yarnpkg.com/lang/en/docs/selective-version-resolutions/ system?

Let me know if it fixes the problem and will release fixed 0.50 version right away.

@adbl
Copy link
Contributor

adbl commented Nov 7, 2017 via email

@petejkim
Copy link

petejkim commented Nov 7, 2017

Awesome that the issue is identified and fixed so quickly. I spent hours trying to troubleshoot this and it was driving me insane. 👍

@petejkim
Copy link

petejkim commented Nov 7, 2017

Nevermind.... Spoke too soon, still getting:

2017-11-07 11:37:55.556 [error][tid:com.facebook.react.JavaScript] undefined is not an object (evaluating 'e.length')
2017-11-07 11:37:55.557765-0800 Cipher[67684:6161103] undefined is not an object (evaluating 'e.length')
2017-11-07 11:37:55.559 [fatal][tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: undefined is not an object (evaluating 'e.length')
2017-11-07 11:37:55.559538-0800 Cipher[67684:6161092] Unhandled JS Exception: undefined is not an object (evaluating 'e.length')

@jamsch Were you able to fix this issue?

@jamsch
Copy link
Contributor Author

jamsch commented Nov 7, 2017

@petejkim Unfortunately not. Even with adding the module resolution I'm having the same error as you are.

@nim23
Copy link

nim23 commented Nov 7, 2017

The minified js bundle is working fine for me now.

@jamsch
Copy link
Contributor Author

jamsch commented Nov 7, 2017

Seems to use the correct version of uglify-es

├─┬ UNMET PEER DEPENDENCY react-native@0.50.1
│ ├─┬ metro-bundler@0.20.1
│ │ ├── absolute-path@0.0.0 deduped
│ │ ├── async@2.6.0
│ │ ├── babel-core@6.26.0 deduped
│ │ ├── babel-generator@6.26.0 deduped
│ │ ├── babel-plugin-external-helpers@6.22.0
│ │ ├── babel-preset-es2015-node@6.1.1
│ │ ├── babel-preset-fbjs@2.1.4 deduped
│ │ ├── babel-preset-react-native@4.0.0 deduped
│ │ ├── babel-register@6.26.0 deduped
│ │ ├── babylon@6.18.0 deduped
│ │ ├── chalk@1.1.3 deduped
│ │ ├── concat-stream@1.6.0 deduped
│ │ ├── core-js@2.5.1 deduped
│ │ ├── debug@2.6.9 deduped
│ │ ├── denodeify@1.2.1 deduped
│ │ ├── fbjs@0.8.16 deduped
│ │ ├── graceful-fs@4.1.11 deduped
│ │ ├── image-size@0.6.1
│ │ ├── jest-docblock@21.2.0
│ │ ├── jest-haste-map@21.2.0
│ │ ├── json-stable-stringify@1.0.1 deduped
│ │ ├── json5@0.4.0
│ │ ├── left-pad@1.1.3
│ │ ├── lodash@4.17.4 deduped
│ │ ├── merge-stream@1.0.1
│ │ ├── mime-types@2.1.11
│ │ ├── mkdirp@0.5.1 deduped
│ │ ├── request@2.83.0
│ │ ├── rimraf@2.6.2 deduped
│ │ ├── source-map@0.5.7 deduped
│ │ ├── temp@0.8.3
│ │ ├── throat@4.1.0
│ │ ├── uglify-es@3.1.8
│ │ ├── wordwrap@1.0.0 deduped
│ │ ├── write-file-atomic@1.3.4
│ │ └── xpipe@1.0.5

@grabbou
Copy link
Contributor

grabbou commented Nov 7, 2017 via email

@petejkim
Copy link

petejkim commented Nov 7, 2017

Yes those are applied correctly. (checked yarn.lock) It appears that the modules are not being loaded in correct order as well? (Polyfills for functions like setTimeout and requestAnimationFrame also appear to be missing when the app bundle is being loaded in release mode. try putting setTimeout(() => {}, 1); in the first line of your index.js.

@fungilation
Copy link

Confirmed fix in using resolving Metro Bundler with version 0.20.1 in package.json, with my issue in CodePush: microsoft/react-native-code-push#1072 (comment)

@petejkim
Copy link

petejkim commented Nov 7, 2017

I think there are multiple issues here. I did not have the Maximum call stack size exceeded (when upgrading to 0.50.1) issue, but I have the crash at runtime only in Release mode issue.

@fungilation
Copy link

@petejkim that is true in my case too. Haven't seen Maximum call stack size exceeded (runtime or bundle time), only runtime error in CodePush and caught by Sentry.

@rafeca
Copy link
Contributor

rafeca commented Nov 8, 2017

@petejkim It seems like the other issue that you are experiencing is facebook/metro#78 . This was fixed by 1a2a46a9fb3e3af2089c06ce7a25dbcd8737201b but we haven't released a major version of metro with that fix yet (I'm planning to release v0.21.0 tomorrow).

@petejkim as a workaround, can you try to add a require('InititializeCore'); statement as early as possible on your application logic?

@adbl
Copy link
Contributor

adbl commented Nov 8, 2017

I confirm that with resolutions using metro bundler 0.20.1 in our project solves:

Our app seems to be working fine but we are upgrading from RN 0.36 so we have a lot of QA to do.

@grabbou
Copy link
Contributor

grabbou commented Nov 8, 2017 via email

@fungilation
Copy link

fungilation commented Nov 8, 2017

but we are upgrading from RN 0.36

You are a brave man.

I confirm RN 0.50.3 fixed my issue, without need for bumping metro-bundler version in package.json resolutions.

@christopherdro
Copy link
Contributor

The issue with e.length is related to #16745

@ItsNoHax
Copy link

ItsNoHax commented Nov 9, 2017

50.3 still crashes iOS apps that are in release mode. When can we expect a fix for this? @grabbou

@grabbou
Copy link
Contributor

grabbou commented Nov 9, 2017 via email

@askielboe
Copy link

@ItsNoHax are you sure you're not seeing this issue instead: #16745 ?

@stale
Copy link

stale bot commented Jan 8, 2018

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 8, 2018
@stale stale bot closed this as completed Jan 15, 2018
@bitabs
Copy link

bitabs commented Jan 25, 2018

I get this error when I try to import a node module in react native (I know we cant import node modules in react-native, but there's a way doing it), I've raised an issue, please clarify philikon/ReactNativify#14

@jasdeepsingh
Copy link

I'm on react-native 0.52.2 and facing this issue. The crash happens only in Android Release build. I suspect iOS Release build will have this issue too, but haven't tried to build an iOS release app yet.

02-05 17:05:40.017 6096-6137/? E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
                                                 Process: com.appname, PID: 6096
                                                 com.facebook.react.common.JavascriptException: Maximum call stack size exceeded., stack:
                                                 <unknown>@11:410
                                                 <unknown>@11:410
                                                 <unknown>@11:410

@suvodeep-pyne
Copy link

suvodeep-pyne commented Apr 24, 2018

react-native 0.52.3. Same issue.

  • happens only on Android
  • only on --variant=release
04-24 16:37:45.957 31436 31484 E ReactNativeJS: Maximum call stack size exceeded.
04-24 16:37:46.192 31436 31484 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling runApplication)
04-24 16:37:47.708 31436 31485 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
04-24 16:37:47.708 31436 31485 E AndroidRuntime: Process: com.package.name, PID: 31436
04-24 16:37:47.708 31436 31485 E AndroidRuntime: com.facebook.react.common.JavascriptException: Maximum call stack size exceeded., stack:
04-24 16:37:47.708 31436 31485 E AndroidRuntime: <unknown>@11:410
04-24 16:37:47.708 31436 31485 E AndroidRuntime: <unknown>@11:410
04-24 16:37:47.708 31436 31485 E AndroidRuntime: <unknown>@11:410
04-24 16:37:47.708 31436 31485 E AndroidRuntime: <unknown>@11:410

@facebook facebook locked and limited conversation to collaborators May 15, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests