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

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

Closed
sjmueller opened this issue Jun 25, 2018 · 14 comments
Closed

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

sjmueller opened this issue Jun 25, 2018 · 14 comments

Comments

@sjmueller
Copy link

sjmueller commented Jun 25, 2018

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?

@mvayngrib
Copy link
Contributor

@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 }],
      ]
    }
  }
}

@sjmueller
Copy link
Author

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

@newyankeecodeshop
Copy link
Contributor

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

@mvayngrib
Copy link
Contributor

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

@lebedev
Copy link
Contributor

lebedev commented Feb 25, 2019

@mvayngrib fyi #364.

@mvayngrib
Copy link
Contributor

@angly-cat thx!

@brunolemos
Copy link

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

@newyankeecodeshop
Copy link
Contributor

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

@lebedev
Copy link
Contributor

lebedev commented Apr 15, 2019

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

@Stonelinks
Copy link

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.

@eliot1019
Copy link

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

@vovkasm
Copy link
Contributor

vovkasm commented Aug 19, 2020

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

@scottmas
Copy link

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.

@robhogan
Copy link
Contributor

Closed by #789

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants