react-native: [Metro Bundler] Maximum call stack size exceeded (when upgrading to 0.50.1)

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

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 6
  • Comments: 43 (24 by maintainers)

Commits related to this issue

Most upvoted comments

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.

0.50.3 is on CI now and should be on npm soon.

On Wed, 8 Nov 2017 at 10:47 Andreas Amsenius notifications@github.com wrote:

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.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/16689#issuecomment-342764639, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWcxid-5Qo2AB6oMwclfmv6agLys98Aks5s0Xi4gaJpZM4QSowl .

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?

@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

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 {
...

this is happening on android

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.

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.

Can everyone who said the fix doesn’t work make sure it’s been applied correctly? I have mixed feedback which is not helpful! So far we doing great job.

I am going to be back to sleep now, but expect me to be online around 10 Central European Time.

On Tue, 7 Nov 2017, 9:55 pm jamsch, notifications@github.com wrote:

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

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/16689#issuecomment-342618895, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWcxsqNCjqCIm6QD2ADJnznzVi6xHveks5s0MPVgaJpZM4QSowl .

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?

@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.