[0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue) #20150

farwayer · 2018-07-11T13:09:59Z

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

  React Native Environment Info:
    System:
      OS: Linux 4.17 Arch Linux rolling
      CPU: x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
      Memory: 1.06 GB / 7.47 GB
      Shell: 5.5.1 - /bin/zsh
    Binaries:
      Node: 10.6.0 - /usr/bin/node
      Yarn: 1.7.0 - /usr/bin/yarn
      npm: 6.1.0 - /usr/bin/npm
      Watchman: 4.9.0 - /usr/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.2, 26.0.1, 26.0.2, 27.0.0, 27.0.3
        API Levels: 22, 23, 24, 25, 26, 27
    npmPackages:
      react: ^16.4.1 => 16.4.1 
      react-native: ^0.56.0 => 0.56.0 
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

Description

Bundler cuts off some used babel helpers in release build. Look like by mistake while optimization.
For example initializerDefineProperty and applyDecoratedDescriptor needed by @babel/proposal-decorators.

Reproducible Demo

{
  "presets": ["react-native"],
  "plugins": [
    ["@babel/proposal-decorators", {"legacy": true}]
  ]
}

"devDependencies": {
  "@babel/plugin-proposal-decorators": "7.0.0-beta.47"
}

function test() {}

class Test {
  @test val;
}

undefined is not a function (evaluating 'babelHelpers.applyDecoratedDescriptor(_class.prototype, "val", [test], {
    enumerable: true,
    initializer: null
  })')

Workaround 1 (can have side effects)

Be care because this workaround can bring some errors with external libs.

For RN 0.56:

yarn add --dev @babel/plugin-transform-runtime@7.0.0-beta.47

.babelrc

{
  "presets": ["react-native"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-transform-runtime", {
      "polyfill": false,
      "regenerator": false
    }]
  ]
}

For RN 0.57:

yarn add --dev @babel/plugin-transform-runtime@7.0.0

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", {"legacy": true}],
    ["@babel/plugin-transform-runtime", {
      "polyfill": false,
      "regenerator": false
    }]
  ]
}

Workaround 2

Move app initialization to some other file (I'm using src/ dir for source) and update root index.js file.
N.B. require main app code instead of import because require executed after.

For RN 0.56:

yarn add @babel/runtime@7.0.0-beta.47

Root index.js

import applyDecoratedDescriptor from '@babel/runtime/helpers/es6/applyDecoratedDescriptor'
import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty'

Object.assign(babelHelpers, {
  applyDecoratedDescriptor,
  initializerDefineProperty,
});

require('./src');

For RN 0.57:

yarn add @babel/runtime@7.0.0

Root index.js

import applyDecoratedDescriptor from '@babel/runtime/helpers/esm/applyDecoratedDescriptor'
import initializerDefineProperty from '@babel/runtime/helpers/esm/initializerDefineProperty'

Object.assign(babelHelpers, {
  applyDecoratedDescriptor,
  initializerDefineProperty,
});

require('./src');

The text was updated successfully, but these errors were encountered:

thientnc-ibl · 2018-07-11T16:23:00Z

@farwayer
Where can this code be placed?

import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty'
Object.assign(babelHelpers, {applyDecoratedDescriptor, initializerDefineProperty});
require('./src');```

farwayer · 2018-07-11T16:46:30Z

@thientnc-ibl This is root index.js file. Put your app code in some other file and require() it at the end of root index.

thientnc-ibl · 2018-07-12T04:55:04Z

The RELEASE build is OK now, bravo... We should write this work around to React native 0.56 doc

janicduplessis · 2018-07-12T04:56:55Z

RN includes its own version of babel-helpers but it does not include the applyDecoratedDescriptor. Facebook probably doesn't use decorators so this went unnoticed. I'll see if we can include it to get this fixed, in the meantime the workaround is valid.

folofse · 2018-07-19T05:57:11Z

I was stuck with this problem in my release build until I manually recreated the android bundle. I thought the bundle was recreated automaticly on release. But I had to run the terminal code after each change: 'react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/'

hvaoc · 2018-07-19T16:52:58Z

Faced the same error with React Native 0.56, used combination of resolutions proposed including the Workaround 2 by @farwayer above.

Steps that I followed:

Clean up dependencies

rm -rf node_modules
yarn
yarn upgrade react-native@0.56.0

@farwayer suggested workaround 2

Check the version of babel components used with React Native by checking the yarn.lock or package-lock.json and match @babel/runtime with the same version. React native 0.56 is using babel 7.0.0-beta.47.

yarn add @babel/runtime@7.0.0-beta.47

index.js

import {AppRegistry} from 'react-native'


// RN 0.56 Release version crashes
// import App from './src/App'
// AppRegistry.registerComponent('MyApp', () => App)

// Workaround: RN 0.56 Release version crashes
// Sources:
//      https://github.com/facebook/react-native/issues/19827
//      https://github.com/facebook/react-native/issues/20150

import applyDecoratedDescriptor from '@babel/runtime/helpers/es6/applyDecoratedDescriptor'
import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty'

Object.assign(babelHelpers, {applyDecoratedDescriptor, initializerDefineProperty})

// Your main app code is in /src/index.js
AppRegistry.registerComponent('MyApp', () => require('./src').default)

Tested iOS / Android - Debug and Release version on Simulators and Devices. - All of them are working fine.

Note: I am also using decorators for MobX and custom .babelrc

package.json

{
  "name": "MyApp",
  "version": "0.0.1",
  "dependencies": {
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
    "@babel/runtime": "7.0.0-beta.47",
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "react": "16.4.1",
    "react-native": "0.56.0"
  },
  "devDependencies": {
    "babel-jest": "23.4.0",
    "babel-preset-react-native": "^5",
    "flow-bin": "^0.76.0",
    "jest": "^23.4.1",
    "jsc-android": "^224109.0.0",
    "react-native-cli": "^2.0.1",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

.babelrc

{
  "presets": [
    "react-native"
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ]
  ]
}

scriptum · 2018-07-24T18:56:15Z

With decorators plugin jest is broken too:

  ● Test suite failed to run

    TypeError: babelHelpers.applyDecoratedDescriptor is not a function

mehulmpt · 2018-07-27T21:04:03Z

Your solution works flawlessly @farwayer. My react-native-vector-icons package was broken with the approach I was trying earlier and this one works fine with it too! +1

csotiriou · 2018-08-28T15:05:58Z

This error also exists in React Native 0.57 rc3.

164738777 · 2018-08-30T07:31:42Z

This error also exists in React Native 0.57 rc3.
+1

lxcid · 2018-09-01T13:03:04Z

In metro-react-native-babel-preset, it is stated that @babel/plugin-transform-flow-strip-types need to be before @babel/plugin-proposal-class-properties.

the flow strip types plugin must go BEFORE class properties! there'll be a test case that fails if you don't.

https://github.com/facebook/metro/blob/579b12974d13c7f02b2c58540ce8fddcb6a3e423/packages/metro-react-native-babel-preset/src/configs/main.js#L19-L21

This kinda explain why flow is affecting the babel output as describe around the issue…

If you provide your own plugins, it get applied first before presets, as described in Plugin Ordering section at https://babeljs.io/docs/en/plugins/#plugin-ordering

So, if you need decorators, you will have to place @babel/plugin-proposal-decorators above @babel/plugin-proposal-class-properties in plugins, which get executed first, thus not applying the @babel/plugin-transform-flow-strip-types, See https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html

The fix for me is to add @babel/plugin-transform-flow-strip-types before the 2 other plugins…

{
  "plugins": [
    [
      "@babel/plugin-transform-flow-strip-types"
    ],
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  ],
}

rborn · 2018-09-05T11:11:50Z

For me none of the above solutions/workarounds work.
I also tried to upgrade to 0.57 but no luck.

rborn · 2018-09-06T11:13:49Z

SOLVED 🎉, thanks to @Amnesthesia @jrnk ❤️ oblador/react-native-vector-icons#801 (comment)

Tested both ios/android debug/release (didn't upload to stores though but delivered with TestFairy so it should be just fine)

chussum · 2018-09-19T02:41:13Z

Thank you guys!! You guys were save me! :) 👍
Thanks!! (__)

…erator (#198) Summary: **Summary** The RN transformer currently relies on the enviroment providing babelHelpers and regeneratorRuntime as globals by using 'babel-external-helpers'. This wasn't really a problem before since helpers were stable and we could maintain our copy easily but it seems like there are more now with babel 7 and it makes sense to include only those used by the app. This is exactly what babel/transform-runtime does. It will alias all helpers and calls to regeneratorRuntime to files in the babel/runtime package. This will solve issues like this facebook/react-native#20150 caused by missing babelHelpers. This solution also avoids bloating babelHelpers to fix OSS issues like the one linked before. **Test plan** - Updated tests so they all pass. - Tested that it actually works by applying the changes locally in an RN app. - Added a test for async functions, to make sure regenerator is aliased properly and doesn't depend on the global. - Made sure require-test.js still fails if the require implementation contains babel helpers (by adding an empty class in the file). Pull Request resolved: #198 Reviewed By: mjesun Differential Revision: D8833903 Pulled By: rafeca fbshipit-source-id: 7081f769f288ab358ba89ae8ee72a513bb12e225

…erator (#198) Summary: **Summary** The RN transformer currently relies on the enviroment providing babelHelpers and regeneratorRuntime as globals by using 'babel-external-helpers'. This wasn't really a problem before since helpers were stable and we could maintain our copy easily but it seems like there are more now with babel 7 and it makes sense to include only those used by the app. This is exactly what babel/transform-runtime does. It will alias all helpers and calls to regeneratorRuntime to files in the babel/runtime package. This will solve issues like this #20150 caused by missing babelHelpers. This solution also avoids bloating babelHelpers to fix OSS issues like the one linked before. **Test plan** - Updated tests so they all pass. - Tested that it actually works by applying the changes locally in an RN app. - Added a test for async functions, to make sure regenerator is aliased properly and doesn't depend on the global. - Made sure require-test.js still fails if the require implementation contains babel helpers (by adding an empty class in the file). Pull Request resolved: facebook/metro#198 Reviewed By: mjesun Differential Revision: D8833903 Pulled By: rafeca fbshipit-source-id: 7081f769f288ab358ba89ae8ee72a513bb12e225

janicduplessis · 2018-09-25T03:58:34Z

@rknell Sorry you are feeling this way. This took a long time to fix since it isn't a hacky patch and required major changes in the way RN handles babel helpers so we don't rely on manually adding them anymore.

A patch to move from global babelHelpers to @babel/runtime landed a few days ago, with a follow up to remove the globals completely from RN that should land soon.

Thanks for you patience on this one.

…erator (#198) Summary: **Summary** The RN transformer currently relies on the enviroment providing babelHelpers and regeneratorRuntime as globals by using 'babel-external-helpers'. This wasn't really a problem before since helpers were stable and we could maintain our copy easily but it seems like there are more now with babel 7 and it makes sense to include only those used by the app. This is exactly what babel/transform-runtime does. It will alias all helpers and calls to regeneratorRuntime to files in the babel/runtime package. This will solve issues like this #20150 caused by missing babelHelpers. This solution also avoids bloating babelHelpers to fix OSS issues like the one linked before. **Test plan** - Updated tests so they all pass. - Tested that it actually works by applying the changes locally in an RN app. - Added a test for async functions, to make sure regenerator is aliased properly and doesn't depend on the global. - Made sure require-test.js still fails if the require implementation contains babel helpers (by adding an empty class in the file). Pull Request resolved: facebook/metro#198 Reviewed By: mjesun Differential Revision: D8833903 Pulled By: rafeca fbshipit-source-id: 7081f769f288ab358ba89ae8ee72a513bb12e225

shinriyo · 2018-10-07T07:38:57Z

Did you resolve?

2018-10-07 16:35:58.532 [error][tid:com.facebook.react.JavaScript] undefined is not a function (near '...babelHelpers.applyDecoratedDescriptor...')

csotiriou · 2018-10-07T20:01:51Z

To be honest, I had to hardcode versions beta.47 of the relevant babel packages in order to get it to work. Upgrading to 7.1.2 didn't help.

pppluto · 2018-11-02T10:26:20Z

for me I need "@babel/core": "^7.0.0" for android

Fsarmento · 2018-11-06T16:39:33Z

This issue seams to be solved in 0.57.4 (60b05ca).

We can go back to:

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('myApp', () => App);

Sushant-Sardeshpande · 2019-03-06T09:16:46Z

Getting the same on updating from 0.55 to 0.58.6
Did not get this on the first package install but the next time I did it, getting it ever since

Edit: For me, just a --reset-cache for packager solved it, been working with a copy using 0.55 as well, not sure if that created an issue the second time around....

AdamGerthel · 2019-03-26T10:14:36Z

I've tried to understand the workarounds here and if they're still needed or not. I'm running RN using Expo v32.0, and I'm heavily invested in decorators (due to MobX), and I'm getting this error when trying to run the production version.

What do I do? I'm not using AppRegistry and I never have before either. Is that a requirement to fix this? How do I use @babel/runtime?

Update: Finally got it up and running again. Not entirely sure what fixed it in the end, but I upgraded from Babel 6 -> 7 and this is what my babel.config.js looks like:

module.exports = function(api) {
  api.cache(true)

  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['@babel/plugin-transform-react-jsx-source'],
      ['@babel/plugin-proposal-decorators', { legacy: true }]
    ]
  }
}

I also cleared Expo cache multiple times (expo r -c)

…erator (facebook#198) Summary: **Summary** The RN transformer currently relies on the enviroment providing babelHelpers and regeneratorRuntime as globals by using 'babel-external-helpers'. This wasn't really a problem before since helpers were stable and we could maintain our copy easily but it seems like there are more now with babel 7 and it makes sense to include only those used by the app. This is exactly what babel/transform-runtime does. It will alias all helpers and calls to regeneratorRuntime to files in the babel/runtime package. This will solve issues like this facebook/react-native#20150 caused by missing babelHelpers. This solution also avoids bloating babelHelpers to fix OSS issues like the one linked before. **Test plan** - Updated tests so they all pass. - Tested that it actually works by applying the changes locally in an RN app. - Added a test for async functions, to make sure regenerator is aliased properly and doesn't depend on the global. - Made sure require-test.js still fails if the require implementation contains babel helpers (by adding an empty class in the file). Pull Request resolved: facebook#198 Reviewed By: mjesun Differential Revision: D8833903 Pulled By: rafeca fbshipit-source-id: 7081f769f288ab358ba89ae8ee72a513bb12e225

…erator (#198) Summary: **Summary** The RN transformer currently relies on the enviroment providing babelHelpers and regeneratorRuntime as globals by using 'babel-external-helpers'. This wasn't really a problem before since helpers were stable and we could maintain our copy easily but it seems like there are more now with babel 7 and it makes sense to include only those used by the app. This is exactly what babel/transform-runtime does. It will alias all helpers and calls to regeneratorRuntime to files in the babel/runtime package. This will solve issues like this facebook#20150 caused by missing babelHelpers. This solution also avoids bloating babelHelpers to fix OSS issues like the one linked before. **Test plan** - Updated tests so they all pass. - Tested that it actually works by applying the changes locally in an RN app. - Added a test for async functions, to make sure regenerator is aliased properly and doesn't depend on the global. - Made sure require-test.js still fails if the require implementation contains babel helpers (by adding an empty class in the file). Pull Request resolved: facebook/metro#198 Reviewed By: mjesun Differential Revision: D8833903 Pulled By: rafeca fbshipit-source-id: 7081f769f288ab358ba89ae8ee72a513bb12e225

This was referenced Jul 11, 2018

Bundle failure on decorators #19955

Closed

after upgrade to 0.56.0-rc.2 production build is crashing #19827

Closed

react-native-bot added the Platform: Linux Building on Linux. label Jul 11, 2018

janicduplessis added JavaScript Impact: Regression Describes a behavior that used to work on a prior release, but stopped working recently. and removed Platform: Linux Building on Linux. labels Jul 12, 2018

react-native-bot added the Platform: Linux Building on Linux. label Jul 12, 2018

janicduplessis mentioned this issue Jul 12, 2018

Use babel runtime instead of relying on global babelHelpers and regenerator facebook/metro#198

Closed

kelset added the Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used. label Jul 13, 2018

CptFabulouso mentioned this issue Jul 16, 2018

Fatal Exception: com.facebook.react.common.JavascriptException: TypeError: undefined is not an object (evaluating 'r.default') aksonov/react-native-router-flux#3124

Closed

alessandro-bottamedi mentioned this issue Jul 16, 2018

[0.56.0-rc.2] Animated.createAnimatedComponent causes undefined is not an object (_this_.setComponentref.bind) #19763

Closed

3 tasks

thientnc-ibl mentioned this issue Jul 31, 2018

Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null babel/babel#8284

Closed

jrnk mentioned this issue Jul 31, 2018

Crashes in Release mode on 0.56.0 oblador/react-native-vector-icons#801

Closed

jinwuu mentioned this issue Aug 31, 2018

Fix issue undefined is not an object evaluating r.default react-navigation/react-navigation#4699

Merged

lxcid mentioned this issue Sep 1, 2018

v7 plugin-proposal-class-properties transform flow type annotation to undefined babel/babel#8417

Closed

simonwang6666 mentioned this issue Sep 3, 2018

0.57.0 Discussion react-native-community/releases#34

Closed

sophiabk mentioned this issue Sep 5, 2018

iOS app crashes in Release Config (but works in Debug) #20985

Closed

3 tasks

farwayer changed the title ~~[0.56][RELEASE] Bundler cuts off some used babel helpers in release build by mistake~~ [0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue) Sep 18, 2018

SkylineJia mentioned this issue Sep 19, 2018

React-Native 0.57 Release build crashes on launch with undefined is not a function from a babelHelpers method. #21180

Closed

This was referenced Sep 21, 2018

[0.56] undefined is not an object (evaluating '_this._setComponentRef.bind') #20588

Closed

[0.57.0-rc.4] TypeError: undefined is not an object (evaluating '_this._setComponentRef.bind') #21055

Closed

vadimkorr mentioned this issue Sep 21, 2018

classProperties isn't currenty enabled #21075

Closed

3 tasks

This comment has been minimized.

Sign in to view

midsbie mentioned this issue Sep 25, 2018

plugin-proposal-class-properties breaks Immutable's Record getter methods babel/babel#8762

Closed

This comment has been minimized.

Sign in to view

jeremybarbet mentioned this issue Sep 28, 2018

@obsverable makes the starter kit crash ueno-llc/react-native-starter#190

Closed

6 tasks

DaniAkash mentioned this issue Oct 13, 2018

Unable to use MobX decorators in React Native 0.57 mobxjs/mobx-react#570

Closed

This was referenced Oct 14, 2018

getting "Unexpected token {" after updating to 0.57.3 #21777

Closed

React Native Error #21558

Closed

tibbus mentioned this issue Nov 8, 2018

Cannot read property 'bind' of undefined / undefined is not an object evaluating _this._setComponentRef.bind #22157

Closed

3 tasks

Menardi mentioned this issue Mar 1, 2019

Immediate crash on Android with latest JSC installed react-navigation/react-navigation#5636

Closed

vkkan mentioned this issue Jul 1, 2019

Unable to find JSIModule for class interface com.facebook.react.bridge.UIManager #20636

Closed

facebook locked as resolved and limited conversation to collaborators Sep 18, 2019

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Sep 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue) #20150

[0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue) #20150

farwayer commented Jul 11, 2018 •

edited

thientnc-ibl commented Jul 11, 2018

farwayer commented Jul 11, 2018

thientnc-ibl commented Jul 12, 2018

janicduplessis commented Jul 12, 2018

folofse commented Jul 19, 2018

hvaoc commented Jul 19, 2018

scriptum commented Jul 24, 2018

mehulmpt commented Jul 27, 2018

csotiriou commented Aug 28, 2018

164738777 commented Aug 30, 2018

lxcid commented Sep 1, 2018

rborn commented Sep 5, 2018

rborn commented Sep 6, 2018

chussum commented Sep 19, 2018 •

edited

This comment has been minimized.

janicduplessis commented Sep 25, 2018

This comment has been minimized.

shinriyo commented Oct 7, 2018

csotiriou commented Oct 7, 2018

pppluto commented Nov 2, 2018

Fsarmento commented Nov 6, 2018

Sushant-Sardeshpande commented Mar 6, 2019 •

edited

AdamGerthel commented Mar 26, 2019 •

edited

[0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue) #20150

[0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue) #20150

Comments

farwayer commented Jul 11, 2018 • edited

Environment

Description

Reproducible Demo

Workaround 1 (can have side effects)

Workaround 2

thientnc-ibl commented Jul 11, 2018

farwayer commented Jul 11, 2018

thientnc-ibl commented Jul 12, 2018

janicduplessis commented Jul 12, 2018

folofse commented Jul 19, 2018

hvaoc commented Jul 19, 2018

scriptum commented Jul 24, 2018

mehulmpt commented Jul 27, 2018

csotiriou commented Aug 28, 2018

164738777 commented Aug 30, 2018

lxcid commented Sep 1, 2018

rborn commented Sep 5, 2018

rborn commented Sep 6, 2018

chussum commented Sep 19, 2018 • edited

This comment has been minimized.

janicduplessis commented Sep 25, 2018

This comment has been minimized.

shinriyo commented Oct 7, 2018

csotiriou commented Oct 7, 2018

pppluto commented Nov 2, 2018

Fsarmento commented Nov 6, 2018

Sushant-Sardeshpande commented Mar 6, 2019 • edited

AdamGerthel commented Mar 26, 2019 • edited

farwayer commented Jul 11, 2018 •

edited

chussum commented Sep 19, 2018 •

edited

Sushant-Sardeshpande commented Mar 6, 2019 •

edited

AdamGerthel commented Mar 26, 2019 •

edited