Can react native be bundled without regenerator-runtime?

Debugging is quite painful with the regenerator runtime polyfill, yet iOS has supported async/await since 10.3 (and chrome for a very long time).

I've tried creating my own .babelrc and removing them, I've tried adding an exclude section, and I've even tried removing locally from babel-preset-react-native. Nothing seems to work! Is there any way to prevent react native and/or metro bundler from using it?

@sjmueller

@sjmueller i'm using the below babelrc to avoid regenerator (search for transform-regenerator) below. Hope it helps :)

{
  env: {
    production: {
      //presets: ['react-native']
      plugins: [
        'syntax-async-functions',
        'syntax-class-properties',
        'syntax-trailing-function-commas',
        'transform-class-properties',
        'transform-es2015-function-name',
        'transform-es2015-arrow-functions',
        'transform-es2015-block-scoping',
        'transform-es2015-classes',
        'transform-es2015-computed-properties',
        'check-es2015-constants',
        'transform-es2015-destructuring',
        'transform-es2015-parameters',
        'transform-es2015-shorthand-properties',
        'transform-es2015-spread',
        'transform-es2015-template-literals',
        'transform-es2015-literals',
        'transform-flow-strip-types',
        'transform-object-rest-spread',
        'transform-react-display-name',
        'transform-react-jsx',
        ['transform-regenerator', {
          asyncGenerators: true, // true by default
          generators: true, // true by default
          async: true // true by default
        }],
        ['transform-async-to-module-method', {
          module: 'bluebird',
          method: 'coroutine'
        }],
        ['transform-es2015-for-of', { loose: true }],
      ]
    },
    development: {
      plugins: [
        'syntax-async-functions',
        'syntax-class-properties',
        'syntax-trailing-function-commas',
        'transform-class-properties',
        'transform-es2015-function-name',
        'transform-es2015-arrow-functions',
        'transform-es2015-block-scoping',
        'transform-es2015-classes',
        'transform-es2015-computed-properties',
        'check-es2015-constants',
        'transform-es2015-destructuring',
        'transform-es2015-parameters',
        'transform-es2015-shorthand-properties',
        'transform-es2015-spread',
        'transform-es2015-template-literals',
        'transform-es2015-literals',
        'transform-flow-strip-types',
        'transform-object-rest-spread',
        'transform-react-display-name',
        'transform-react-jsx',
        ['transform-regenerator', {
          asyncGenerators: true, // true by default
          generators: false, // true by default
          async: true // true by default
        }],
        ['transform-async-to-module-method', {
          module: 'bluebird',
          method: 'coroutine'
        }],
        ['transform-es2015-for-of', { loose: true }],
      ]
    }
  }
}

@mvayngrib

@mvayngrib thanks for this, does it work with Babel 7 and react 0.57? We’ve upgraded and the babelrc has changed significantly as a result.

@sjmueller

@sjmueller I've been working on an alternative Babel config using the "env" preset to get JS targeted based on our minimum supported iOS/Android OS. This is what I've come up with so far, targeting iOS 10.3+ and Android with the alternative JavaScriptCore runtime.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": { "ios": "10.3" },
        "modules": false,
        "include": ["transform-classes"]
      }
    ]
  ],
  "plugins": [
    "@babel/transform-flow-strip-types",
    "@babel/proposal-optional-catch-binding",
    "@babel/proposal-class-properties",
    ["@babel/proposal-object-rest-spread", { "useBuiltIns": true }],
    ["@babel/transform-react-jsx", { "useBuiltIns": true }],
    [
      "@babel/transform-modules-commonjs",
      { "strict": false, "strictMode": false, "allowTopLevelThis": true }
    ]
  ]
}

I had to leave in the transform-classes because there are a few parts of the React tools runtime that don't work well with pure ES6 class components. (Hot module reloading modifications, for example.)
This config was tested with Babel 7 beta, but should be okay with 7.0.0.
Hope it helps.

@sjmueller

@sjmueller sorry, haven't tried, i'm on RN 0.55.4

@newyankeecodeshop cool, will give it a try when we upgrade! I haven't seen this "targets": { "ios": ".." } bit before. Originally, I wanted to have different settings for ios vs android by using the BABEL_ENV environment variable but metro doesn't respect it yet (see #183). Glad to see there are alternatives.

@mvayngrib

@mvayngrib fyi #364.

@angly-cat thx!

Now that we have an updated JavaScriptCode by default, shouldn't regenerators be disabled by default and ship ES6 code to production?

@brunolemos

@brunolemos RN still supports iOS 9 and 10.x before 10.3, which do not have async/await support. It's still necessary for the library to bundle just in case.

@newyankeecodeshop

@newyankeecodeshop so regenerator transformations can be at least completely dropped for Android builds, correct?

I'm working on a very large react-native application that is experiencing performance problems, and would also love to drop regenerator transforms for our android builds and see if that does anything. Very interested if anyone else has done this, otherwise I might try it myself in a few weeks.

@lebedev

@lebedev @newyankeecodeshop
I tried dropping regenerator-transforms on my RN app's Android build by going through the list of plugins here: metro-react-native-babel-preset
I kept all of the same plugins in my babel config except babel/plugin-transform-regenerator.
I'm actually seeing better perf but am also getting nondeterministic crashes that are pretty hard to understand.

07-29 16:25:04.344  8580  8645 E AndroidRuntime: FATAL EXCEPTION: mqt_native_modules
07-29 16:25:04.344  8580  8645 E AndroidRuntime: com.facebook.react.bridge.JSApplicationIllegalArgumentException: Could find root view for a given ancestor with tag 11963
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at com.swmansion.gesturehandler.react.RNGestureHandlerModule.tryInitializeHandlerForReactRootView(RNGestureHandlerModule.java:577)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at com.swmansion.gesturehandler.react.RNGestureHandlerModule.attachGestureHandler(RNGestureHandlerModule.java:487)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at java.lang.reflect.Method.invoke(Native Method)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at android.os.Handler.handleCallback(Handler.java:751)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at android.os.Handler.dispatchMessage(Handler.java:95)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at android.os.Looper.loop(Looper.java:154)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
07-29 16:25:04.344  8580  8645 E AndroidRuntime: 	at java.lang.Thread.run(Thread.java:761)

@eliot1019

@eliot1019
Does you resolve crashes? Can it be that faster JS processing exposes some race conditions in code of react-native-gesture-handler?

Just heads up that while removing regenerator from the preset works just fine on ios using JSC, it does NOT work on Android when using Hermes. It doesn't even work when you transform async functions to generators (@babel/plugin-transform-async-to-generator). So be warned.

Closed by #789

Navigation Menu

Repository navigation

Can react native be bundled without regenerator-runtime? #187

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Can react native be bundled without regenerator-runtime? #187

Description

Activity

mvayngrib commented on Sep 16, 2018

sjmueller commented on Sep 17, 2018

newyankeecodeshop commented on Sep 17, 2018

mvayngrib commented on Sep 17, 2018

lebedev commented on Feb 25, 2019

mvayngrib commented on Feb 25, 2019

brunolemos commented on Apr 15, 2019

newyankeecodeshop commented on Apr 15, 2019

lebedev commented on Apr 15, 2019

Stonelinks commented on Jun 4, 2020

eliot1019 commented on Jul 29, 2020

vovkasm commented on Aug 19, 2020

scottmas commented on Oct 22, 2020

robhogan commented on Oct 13, 2022

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions