React-native: Bundle failure on decorators

[haggholm]

• [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.15 Ubuntu 18.04 LTS (Bionic Beaver)
      CPU: x64 Intel(R) Core(TM) i7-2600K CPU @ 3.40GHz
      Memory: 3.13 GB / 31.39 GB
      Shell: 4.4.19 - /bin/bash
    Binaries:
      Node: 8.11.1 - /usr/bin/node
      Yarn: 1.5.1 - /usr/local/bin/yarn
      npm: 6.1.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      Android SDK:
        Build Tools: 23.0.1, 25.0.0, 25.0.2, 26.0.0, 26.0.1, 26.0.2, 27.0.1, 27.0.3
        API Levels: 23, 24, 26, 27
    npmPackages:
      @client/react: ^1.0.13 => 1.0.62 
      @client/react-native: ^1.0.13 => 1.0.62 
      react-native: ^0.56.0-rc.4 => 0.56.0-rc.4 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Description

Multi-platform app with both regular React (Webpack) and React Native builds. I upgraded RN to 0.56, which of course necessitated changes to the Babel environment, e.g. babel-plugin-transform-decorators-legacy → @babel/plugin-proposal-decorators ({legacy:true}). The Webpack version builds fine. The RN version fails bundling:

error: bundling failed: TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null
    at Object.validate (/home/petter/owl/client2/root/node_modules/@babel/types/lib/definitions/utils.js:128:13)
    at validate (/home/petter/owl/client2/root/node_modules/@babel/types/lib/validators/validate.js:17:9)
    at builder (/home/petter/owl/client2/root/node_modules/@babel/types/lib/builders/builder.js:46:27)
    at Object.AssignmentExpression (/home/petter/owl/client2/root/node_modules/@babel/types/lib/builders/generated/index.js:233:31)
    at _core.types.sequenceExpression.identDecorators.map.decorator (/home/petter/owl/client2/root/node_modules/@babel/plugin-proposal-decorators/lib/transformer-legacy.js:47:26)
    at Array.map (<anonymous>)
    at applyEnsureOrdering (/home/petter/owl/client2/root/node_modules/@babel/plugin-proposal-decorators/lib/transformer-legacy.js:44:59)
    at PluginPass.ClassExpression (/home/petter/owl/client2/root/node_modules/@babel/plugin-proposal-decorators/lib/transformer-legacy.js:161:28)
    at newFn (/home/petter/owl/client2/root/node_modules/metro/node_modules/@babel/traverse/lib/visitors.js:237:21)
 BUNDLE  [android, dev] ./index.android.js ▓▓▓▓▓▓▓░░░░░░░░░ 45.7% (809/1197), failed.

What puzzles me is that, again, the Webpack version works, so presumably there’s nothing inherently problematic about our Babel setup, and migration to Babel 7 was successful. The only difference in Babel configuration here is babel-preset-react-native (5.0.2) versus @babel/preset-env. (The thought occurred to me that this might be due to the RN preset importing proposal-class-properties before -decorators, but modifying babel-preset-react-native/configs/main.js to include the decorator plugin does not help.)

Looking at the AST in Babel, it looks like it’s failing with both class and method decorators.

Unfortunately I do not have a demo and can’t share the (proprietary) source, but any suggestions on how to go about debugging this would be welcome.

[j-mendez]

@haani104 I am experiencing the same issue. Might be worth to wait until 56 is stable.

[kelset]

I think this is a duplicate of #19789, and in particular I think you should take a look at this comment

[haggholm]

The comment unfortunately doesn’t help—as mentioned above, I am using the new @babel-scoped packages, which work with Babel 7 (as demonstrated by the fact that the Webpack build works properly).

[kelset]

Uhm could it be then that maybe some react-native only lib is still on babel 6, or something like that?

In our app we had to add this babel-bridge and enforce yarn resolutions in order to make sure that everything was being bundled properly.

That said, we will release 0.56.0 today (if nothing goes wrong) in order to increase the surface of devs using it, and hopefully lead to faster fixes for issues like yours.

[haggholm]

After purging some old Babel plugins, pinning the versions of all @babel/-scoped packages to match the precise version pinned by babel-preset-react-native, &c., I was finally able to get past this error message and get stuck on a different error message that also seems to be related to Babel and decorators, and also happens in RN even though it works with Webpack: https://github.com/facebook/react-native/issues/20038

[TitanKing]

Attempted everything that @haggholm did but can't get past the "bundling failed: TypeError: Property right of AssignmentExpression". I am going to attempt getting around this for a little while else I will have to revert to older version again.

[farwayer]

I have another problem with decorators with 0.56 in release build only:

function test() {}

class Test {
  @test val;
}

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

P.S. "Old Version" tag should be removed.

[alessandro-bottamedi]

Same problem here after upgrading to RN 0.56.

The app works in DEBUG with this configuration:

package.json

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

.babelrc

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

But in RELEASE xCode crash with this error:

babelHelpers.applyDecoratedDescriptor is not a function.

[abelcha]

was exactly in the situation @haggholm mentioned,

It seems the error is caused by a dependency version missmatch between the plugins used in babel-plugin-react-native, which use the 7.0.0-beta.47 version and the local babel packages.

Be sure to check that all the babel package are actually installed with the beta.47 version:

grep -r 'version' node_modules/@babel/*/package.json|grep -v "beta.47"

The problem in our case was that some babel packages where installed using a caret range ^7.0.0-beta.47. we fixed it using the hard coded version 7.0.0-beta.47.

[kelset]

The problem in our case was that some babel packages where installed using a caret range ^7.0.0-beta.47. we fixed it using the hard coded version 7.0.0-beta.47.

I was actually talking with the main dev behind Babel over the weekend and I think using the fixed dependency may be a solution. Can anyone else test if it fixes the issue?

[thientnc-ibl]

@kelset
I fixed and used the version @babel/core:7.0.0-beta.47 with "@babel/plugin-proposal-decorators": "7.0.0-beta.47", and this error was resolved.
BUT I got the new error in Animated.createAnimatedComponent. I left the comment in this issue
https://github.com/facebook/react-native/issues/19763

[farwayer]

Using @babel/transform-runtime fix the problem with babelHelpers.applyDecoratedDescriptor is not a function.

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

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



md5-e8b801a44a58bf997c297e1045939a56



TypeError: undefined is not an object (evaluating '_getPrototypeOf2.default')

This error is located at:
    in Icon
    in RCTView
    in App
    in RCTView
    in RCTView
    in AppContainer

[alessandro-bottamedi]

@farwayer Do you have other packages installed? for icons? If yes, try to disable its...

[farwayer]

@alessandro-bottamedi react-native-vector-icons and it works without transform-runtime but throws error with.

[thientnc-ibl]

@farwayer
You should edit your .babelrc like @alessandro-bottamedi 's comment. This is https://github.com/facebook/react-native/issues/19763#issuecomment-403415501

[CodeRabbitYu]

@thientnc-ibl I still have the same problem.

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



"devDependencies": {
    "@babel/core": "^7.0.0-beta.52",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.52",
    "@babel/plugin-transform-runtime": "^7.0.0-beta.52",
    "@babel/runtime": "^7.0.0-beta.52",
    "babel-jest": "^23.2.0",
    "babel-preset-react-native": "5.0.2",
    "jest": "23.3.0",
    "mobx": "^5.0.3",
    "mobx-react": "^5.2.3",
    "react-test-renderer": "16.4.1"
  },

[thientnc-ibl]

@SurpassRabbit
You MUST use fixed version 7.0.0-beta.47 for all @babel dependencies, like this

    "@babel/core": "7.0.0-beta.47",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
    "@babel/plugin-transform-runtime": "7.0.0-beta.47",
    "@babel/runtime": "7.0.0-beta.47"

[CodeRabbitYu]

@thientnc-ibl Thank you, you are right.

[kelset]

👋 Just to double down on it, yes, as @thientnc-ibl wrote all the deps babel related must be fixed to 7.0.0-beta.47 - that is related to how semver works in a beta scenario. Today/tomorrow I hope I'll be able to update the changelog in order to make it more clear.

[farwayer]

@kelset It should be doc'ed of course but what about errors in RELEASE bundle transformation? Build should work as is without using @babel/tranform-runtime. Some babel helpers missed in RELEASE bundle (initializerDefineProperty, applyDecoratedDescriptor for example).

Not sure but look like it is trimming error while bundle optimization. Should we open new issue for this?

@thientnc-ibl I already have same babel config as @alessandro-bottamedi. It's another error I got while using @babel/transform-runtime.

[thientnc-ibl]

I'm not sure my current issue on RELEASE build is related with @farwayer above comment
My code uses Platform module from react-native to check OS

if (Platform.OS === 'ios') {
    this._backup()
}

It is ok on DEBUG, but throws the below exception log on RELEASE
[tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: TypeError: undefined is not an object (evaluating 'e.default')

I MUST change my code to use babel optional chaining syntax and it is fine. The stranger thing now is the line this._backup() can be executed on IOS

if (Platform?.OS === 'ios') {
    this._backup()
}

@kelset , Can you investigate this case? :(

[kelset]

What I can do is tell you to:

1) check this issue which is where all the production issues related to babel have been discussed until now: https://github.com/facebook/react-native/issues/19827

2) if that's not enough, open a new issue following the template and attaching a repro.

[farwayer]

Created new issue with 2 workarounds for babel helpers bug https://github.com/facebook/react-native/issues/20150

[kelset]

BTW related to decorators I found this in a React-related issue I was reading earlier, I think it's worth sharing here:

For people coming to this thread later—if you use MobX or a similar library, you don’t need decorators. They are just syntax sugar in this case.
Learn more: #214 (comment), #411 (comment).
Here is why we don’t include them: #411 (comment).

[EyMaddis]

@farwayer How did you solve the _getPrototypeOf2-Error? I tried to use the same babelHelpers workaround by adding it to babelHelpers, but it seems to get included from somewhere else and fails

Edit: it seems like the polyfill: false should be set to true, however this leads to crashes where require() is not defined...

[r3wt]

@kelset using that approach might work but its a massive undertaking, especially if you are using a ton of decorators all through out your project. it will also make the code harder to read and understand.

EDIT: for others, reading this, make sure you specify the relevant plugins in your production config. my issue was having it only specified in my development config.

[kelset]

@r3wt I was just reporting those info 🤷‍♂️

And btw, you should also keep an eye on what Babel will do with decorators, since as they just wrote in the blogpost for 7.0 they have a proposal https://github.com/babel/babel/pull/7976 that will probably change how to use them in some way.
And btw you should also double check babel-eslint -> https://github.com/babel/babel-eslint/releases/tag/v9.0.0

That said, as you also pointed out, it seems that this set of issues is more related to the single project's babel configuration than RN itself; so I'd like to close this. Let me know if it should stay open.

[devthejo]

I've solved it using beta.47 version of babel (like the ReactNative'one)
see https://github.com/babel/babel/issues/7831#issuecomment-419558735

[thereis]

I'm having the same issue with RN 0.57

[LinusU]

I'm also having this problem in RN 0.57 which uses the stable version 7.0.0 of Babel. My debug builds works, but when doing a release build it crashes on startup with:

09-14 09:48:23.097 16270 16315 E ReactNativeJS: babelHelpers.applyDecoratedDescriptor is not a function. (In 'babelHelpers.applyDecoratedDescriptor(s.prototype,"nameOfMyProperty",[t],{configurable:!0,enumerable:!0,writable:!0,initializer:null})', 'babelHelpers.applyDecoratedDescriptor' is undefined)
09-14 09:48:23.112 16270 16315 E ReactNativeJS: Module AppRegistry is not a registered callable module (calling runApplication)

This is my .babelrc:

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

and the relevant part of package.json:

    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/runtime": "^7.0.0",

Currently trying to figure out what's wrong and where the fix should be applied...

[LinusU]

Okay, the problem is that React Native is bundling its own version of babel-helpers (exposed as a global variable named babelHelpers), which doesn't include support for decorators.

This will be fixed when this PR lands in Metro, and when React Native upgrades to that version of Metro. (I'm guessing React Native 0.58)

https://github.com/facebook/metro/pull/198

In the meantime, you can use this workaround:

diff --git a/index.js b/index.js
index 77f0986..8d0a685 100644
--- a/index.js
+++ b/index.js
@@ -1,7 +1,13 @@
+import applyDecoratedDescriptor from '@babel/runtime/helpers/esm/applyDecoratedDescriptor'
+import initializerDefineProperty from '@babel/runtime/helpers/esm/initializerDefineProperty'
+
 import { AppRegistry } from 'react-native'
-import App from './App'
+
+Object.assign(babelHelpers, { applyDecoratedDescriptor, initializerDefineProperty })
+
+const App = require('./App').default

 AppRegistry.registerComponent('Ctrlpanel', () => App)

Together with npm add @babel/runtime

[flexaddicted]

@kelset I'm working on a Brownfield app and I've just updated to 0.57.

I receive this error when doing the release (both iOS and Android):

[tid:com.facebook.react.ExceptionsManagerQueue] Unhandled JS Exception: babelHelpers.typeof is not a function. (In 'babelHelpers.typeof(n)', 'babelHelpers.typeof' is undefined)

I've applied the workaround by @LinusU but it does not work. The console.log is never printed.

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

console.log(applyDecoratedDescriptor);
console.log(initializerDefineProperty);

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

require('./src/ApplicationRegistry');

ApplicationRegistry is the file where I register the components exposed to the native world.

Here my package.json.

"dependencies": {
    "@babel/polyfill": "^7.0.0",
    "@babel/runtime": "7.0.0",
    "ent": "^2.2.0",
    "jssha": "^2.3.1",
    "lodash": "^4.17.10",
    "moment": "^2.19.4",
    "moment-timezone": "^0.5.17",
    "react": "^16.5.2",
    "react-native": "^0.57",
    "react-native-elements": "^0.19.1",
    "react-native-fast-image": "^4.0.14",
    "react-native-htmlview": "^0.13.0",
    "react-native-hyperlink": "0.0.11",
    "react-native-remote-svg": "^1.2.0",
    "react-native-scrollable-tab-view": "^0.8.0",
    "react-native-svg": "^6.3.1",
    "react-native-vector-icons": "^5.0.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-saga": "^0.16.0",
    "reselect": "^3.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
    "concurrently": "^2.2.0",
    "jest": "^23.6.0",
    "metro-react-native-babel-preset": "^0.45.2",
    "msvgc": "^0.1.1",
    "prettier": "1.9.2",
    "react-dom": "^16.3.0-alpha.1",
    "react-native-storybook-loader": "^1.6.0"
  }

Here my .babelrc:

{
  "presets": ["@babel/preset-env", "module:metro-react-native-babel-preset"],
  "plugins": [
    ["transform-inline-environment-variables"]
  ]
}

Any idea?

[Fendoro]

@flexaddicted, i got same error Unhandled JS Exception: babelHelpers.typeof is not a function. in release build and fixed it by deleting @babel/preset-env from presets in .babelrc

Here my .babelrc:

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ]
}

[flexaddicted]

@Fendoro Thank you very much! Removing @babel/preset-env the app now works also in release mode.

[shinriyo]

undefined is not a function (near '...babelHelpers.applyDecoratedDescriptor...')
Mine can't work on release build. But, Simulator can.

I just mimicked "LinusU commented".

{
  plugins: [
    ['@babel/plugin-proposal-decorators', {legacy: true}],
    ["@babel/plugin-transform-runtime", { "helpers": true }] # I added this
  ],
  "presets": ["module:metro-react-native-babel-preset"]
}

My package.json doesn't have them.
"@babel/plugin-transform-runtime"
"@babel/runtime"

So, I also did the command.

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

now I have them in my package.json.

    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/runtime": "^7.1.2",

But, doesn't work yet..

[shinriyo]

I also did yarn add babel-plugin-transform-inline-environment-variables --dev

package.json.

    "babel-plugin-transform-inline-environment-variables": "^0.4.3",

But, doesn't work yet..

I don't use preset-env. I don't write it.

[shinriyo]

I also use react-native-vector-icons. version 5.

[shinriyo]

yarn add babel-preset-react-native@5 --dev but not success.

[shinriyo]

I don't know why resolve.

My ReactNative project is created like this.
Why 0.57.0-rc.3? cause I'd like to use TypeScript.
react-native init RN057Sample --version 0.57.0-rc.3

my package.json

{
  "name": "kazoemon",
  "version": "0.0.1",
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "start": "yarn jest --clearCache && react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "jest"
  },
  "dependencies": {
    "mobx": "^5.1.2",
    "mobx-react": "^5.2.8",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-native": "0.57.0-rc.3",
    "react-native-admob": "2.0.0-beta.5",
    "react-native-elements": "^0.19.1",
    "react-native-radio-buttons": "^1.0.0",
    "react-native-vector-icons": "^5.0.0",
    "react-navigation": "^2.16.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-decorators": "7.0.0-beta.47",
    "@babel/plugin-transform-runtime": "7.0.0-beta.47",
    "@babel/runtime": "^7.1.2",
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "^0.43.5",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

what I did is.
I guess 7.0.0-beta.47 is important version.

yarn add --dev @babel/core
yarn add --dev @babel/[email protected]
yarn add --dev @babel/[email protected]

My .babelrc

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

I mimicked what "Alessandro Bottamedi" answered in the site
https://stackoverflow.com/questions/51212618/how-to-use-mobx-in-react-native-0-56-babel-7-with-decorators

[williscool]

inspired by @Fendoro 's comment

I got my react native build back working by not adding plugins that are already present in

https://github.com/facebook/metro/blob/master/packages/metro-react-native-babel-preset/src/configs/main.js

I don't really use anything not in the preset to begin with lol.

Hope this helps someone else.

Ironically this even made my test suite faster lol.

Go figure.

I also run a node server our of the same repo that builds with the same babel config too

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[cpojer]

It seems like this shouldn't be an issue any more with the latest versions of RN and there are workarounds mostly related to babel.