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

Bundle failure on decorators #19955

Closed
3 tasks done
haggholm opened this issue Jun 28, 2018 · 42 comments
Closed
3 tasks done

Bundle failure on decorators #19955

haggholm opened this issue Jun 28, 2018 · 42 comments
Labels
Bug JavaScript Resolution: Locked This issue was locked by the bot. Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used.

Comments

@haggholm
Copy link

haggholm commented Jun 28, 2018

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
Copy link

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

@kelset
Copy link
Collaborator

kelset commented Jul 2, 2018

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

@haggholm
Copy link
Author

haggholm commented Jul 3, 2018

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
Copy link
Collaborator

kelset commented Jul 4, 2018

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
Copy link
Author

haggholm commented Jul 4, 2018

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: #20038

@TitanKing
Copy link

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
Copy link
Contributor

farwayer commented Jul 5, 2018

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
Copy link

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
Copy link

abelcha commented Jul 8, 2018

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
Copy link
Collaborator

kelset commented Jul 9, 2018

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
Copy link

thientnc-ibl commented Jul 9, 2018

@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
#19763

@farwayer
Copy link
Contributor

farwayer commented Jul 9, 2018

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"
...
  }

Thanks to @alessandro-bottamedi. But this brings another problem:

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
Copy link

alessandro-bottamedi commented Jul 9, 2018

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

@farwayer
Copy link
Contributor

farwayer commented Jul 9, 2018

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

@thientnc-ibl
Copy link

@farwayer
You should edit your .babelrc like @alessandro-bottamedi 's comment. This is #19763 (comment)

@CodeRabbitYu
Copy link

@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
Copy link

thientnc-ibl commented Jul 10, 2018

@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
Copy link

@thientnc-ibl Thank you, you are right.

@kelset
Copy link
Collaborator

kelset commented Jul 10, 2018

👋 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
Copy link
Contributor

farwayer commented Jul 10, 2018

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

2018-07-10-144351_393x122_scrot

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
Copy link

thientnc-ibl commented Jul 11, 2018

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? :(

@devthejo
Copy link

I've solved it using beta.47 version of babel (like the ReactNative'one)
see babel/babel#7831 (comment)

@thereis
Copy link

thereis commented Sep 13, 2018

I'm having the same issue with RN 0.57

@LinusU
Copy link
Contributor

LinusU commented Sep 14, 2018

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
Copy link
Contributor

LinusU commented Sep 14, 2018

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)

facebook/metro#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
Copy link

flexaddicted commented Sep 21, 2018

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

@hramos hramos changed the title [0.56.4-rc.4] Bundle failure on decorators Bundle failure on decorators Sep 21, 2018
@Fendoro
Copy link

Fendoro commented Sep 24, 2018

@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
Copy link

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

@shinriyo
Copy link

shinriyo commented Oct 3, 2018

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
Copy link

shinriyo commented Oct 3, 2018

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
Copy link

shinriyo commented Oct 5, 2018

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

@shinriyo
Copy link

shinriyo commented Oct 5, 2018

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

@shinriyo
Copy link

shinriyo commented Oct 7, 2018

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/plugin-proposal-decorators@7.0.0-beta.47
yarn add --dev @babel/plugin-transform-runtime@7.0.0-beta.47

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
Copy link

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
Copy link

stale bot commented Jan 16, 2019

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 16, 2019
@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 26, 2019
@hramos hramos removed the Bug Report label Feb 6, 2019
@cpojer
Copy link
Contributor

cpojer commented Mar 20, 2019

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.

@cpojer cpojer closed this as completed Mar 20, 2019
@facebook facebook locked as resolved and limited conversation to collaborators Mar 20, 2020
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Mar 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Bug JavaScript Resolution: Locked This issue was locked by the bot. Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used.
Projects
None yet
Development

No branches or pull requests