React-native: [0.56][RELEASE] Bundler cuts off some used babel helpers in release build (decorators issue)

[farwayer]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] 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"
}



md5-9101625479f0035372f5dd44dbf8cd98

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/[email protected]

`.babelrc`
```json
{
  "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/[email protected]

.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/[email protected]

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/[email protected]

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');

[thientnc-ibl]

@farwayer
Where can this code be placed?
import applyDecoratedDescriptor from '@babel/runtime/helpers/es6/applyDecoratedDescriptor' import initializerDefineProperty from '@babel/runtime/helpers/es6/initializerDefineProperty' Object.assign(babelHelpers, {applyDecoratedDescriptor, initializerDefineProperty}); require('./src');

[farwayer]

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

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

[janicduplessis]

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]

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]

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:

1. Clean up dependencies

rm -rf node_modules
yarn
yarn upgrade [email protected]

1. @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/[email protected]

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]

With decorators plugin jest is broken too:

  ● Test suite failed to run

    TypeError: babelHelpers.applyDecoratedDescriptor is not a function

[mehulmpt]

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]

This error also exists in React Native 0.57 rc3.

[164738777]

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

[lxcid]

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]

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

[rborn]

SOLVED 🎉, thanks to @Amnesthesia @jrnk ❤️ https://github.com/oblador/react-native-vector-icons/issues/801#issuecomment-409268915

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

[ungaro]

and how is this going to work with HOC?

My root index.js file is like this:

import './shim'

import React from 'react'
import { AppRegistry } from 'react-native';
import App from './App';
import Provider from './src/mobx'
import Amplify, { Auth} from 'aws-amplify'
import config from './src/aws-exports'
import { ApolloProvider } from 'react-apollo'

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
   request: async operation => {
    operation.setContext({
      headers: {
        referrer: "https://referrer.com"
      }
    });
  },
  uri: "https://xxx.execute-api.us-east-2.amazonaws.com/dev/graphql/"
});



Amplify.configure(config)

const AppWithData = () => (
  <Provider>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </Provider>
)

console.ignoredYellowBox = ['Warning', 'Remote']

AppRegistry.registerComponent('AppName', () => AppWithData);

[rborn]

@ungaro what error do you get?

[ungaro]

@rborn i was getting the same applyDecoratedDescriptor error mentioned here. was able to pass this error by changing my .babelrc to this (without changing anything in my code):

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

But now, i'm getting a white screen in release builds. I wonder if this is a brand new error, or related to this error. :)

2018-09-08 09:59:18.392 [error][tid:com.facebook.react.JavaScript] TypeError: undefined is not an object (evaluating 'e.default')

This error is located at:
    in t
    in withDimensions(undefined)
    in RCTView
    in t
    in n
    in n
    in e
    in t
    in t
    in n
    in e
    in t
    in e
    in t
    in t
    in v
    in RCTView
    in RCTView
    in n

[fahidmohammad]

@ungaro im having the same error in release mode, when using mobx-react.

https://github.com/mobxjs/mobx-react/issues/546

https://github.com/oblador/react-native-vector-icons/issues/801

Anyone got any workaround?

[ungaro]

@fahidmohammad no, still stuck at this thing.

I've also tried to have a debug release with optimization level Fastest, Smallest [-0s] and it also works that way.

But with release build, i get a white screen and can't debug it.

[fahidmohammad]

@ungaro this is going to kill the work for sure, i'm totally stuck without any clue. I believe someone has to take this issue very seriously as its a blocker for many use cases.

[rborn]

@ungaro you need to have .babelrc split in dev/production like here https://github.com/oblador/react-native-vector-icons/issues/801#issuecomment-409268915

Alsop keep @babel/* vesions to 7.0.0-beta.47

[fahidmohammad]

@rborn after this patch oblador/react-native-vector-icons#801 (comment) everything working fine.

[bzeeman]

It's almost l ike this gets me so close to working. But I get some weird errors and ultimately back into issues with decorators.

[m-vdb]

OMG, two months and still not addressed properly? Is this fixed in 0.57 (https://github.com/react-native-community/react-native-releases/issues/34)? I have been blocked by this for weeks. I am really not confident applying a patch like that.

[rborn]

@bzeeman what errors?

[fahidmohammad]

@m-vdb till we have a stable release i believe we have no other option than to go with the path. Provided if all working without any glitches 😜

[m-vdb]

@fahidmohammad of course, we wouldn't want to release a broken 0.57. But what I experienced is a broken 0.56...

[CodeRabbitYu]

I have the same problem in 0.57，Can anyone help me?

    com.facebook.react.common.JavascriptException: undefined is not a function (evaluating 'babelHelpers.applyDecoratedDescriptor(o.prototype,"imageLoadedError",[b.observable],{configurable:!0,enumerable:!0,writable:!0,initializer:function(){return!1}})'), stack:

[LinusU]

@SurpassRabbit I've posted a workaround here: https://github.com/facebook/react-native/issues/19955#issuecomment-421295617

[CodeRabbitYu]

@LinusU thank you, that‘s a good idea

[farwayer]

The issue still exists in React Native 0.57. I updated workarounds for new version.

[kelset]

Isn't this issue a duplicate of the afore mentioned #19955, and technically related to Metro? 🤔

I feel that since @LinusU workaround is there, we should close this and keep the conversation going there, since there are also more information about decorators.

[LinusU]

To be clear, I don't even think that this is a "bug" in React Native. It's simply that we don't support decorators, and there is currently no straightforward way to add this as an end user.

The latter part of that will be addressed when facebook/metro#198 lands. There will still not be out-of-the-box support for decorators until the spec has finalized. This is intentional.

[kelset]

Exactly - let's close this and keep the other one open for now until the PR to metro lands.

[farwayer]

@kelset #19955 is another issue caused by user misconfiguration (different builtin babel and user external babel plugin versions). #19955 can be closed.
Yes this issue related to Metro.

@LinusU facebook/metro#198 should fix this issue and some potential similar issues with non-builtin extra babel plugins.

[farwayer]

@kelset Please read #19955 description. It is not about babelHelpers at all.

[chustyle]

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

[rknell]

• sigh * react native just keeps disappointing me the more I use it. Everything just feels like one hacky patch on top of another hacky patch.

[janicduplessis]

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

[bzeeman]

• sigh * react native just keeps disappointing me the more I use it. Everything just feels like one hacky patch on top of another hacky patch.

I'm inclined to agree, but that's not really the fault of this team as much as it is the nature of node. When I looked at my rather small project and the saw of packages and some 1400+ contributors I realized that this just isn't something that I can rely on to write time critical applications. When google made the decision to force API 26 by August, it took far too long to get a reliable and stable version of react. I understand the challenge is immense, and the team here is doing a fantastic job considering. What it boils down to is that the longer react is around, the more cooks jump in the kitchen, and the "agility" begins diminishing. The more layers there are, the more layers there are to deal with when Google or Apple makes a significant change. This is generally the same principle between mechanical and solid state. The more moving parts you have, the more parts you have that can fail. It's that very reason why I suggest that at this point, native code is unlikely to be more expensive or time consuming than having a shared code base.

[shinriyo]

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]

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]

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

[Fsarmento]

This issue seams to be solved in 0.57.4 (https://github.com/facebook/react-native/commit/60b05cae9ededbff538a7fce6c59520399077264).

We can go back to:

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

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

[Sushant-Sardeshpande]

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]

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)