Skip to content

Bundle failure on decorators #19955

Closed
Closed
@haggholm

Description

@haggholm

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.

Activity

j-mendez

j-mendez commented on Jun 29, 2018

@j-mendez

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

kelset

kelset commented on Jul 2, 2018

@kelset
Contributor

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

haggholm

haggholm commented on Jul 3, 2018

@haggholm
Author

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

kelset commented on Jul 4, 2018

@kelset
Contributor

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

haggholm commented on Jul 4, 2018

@haggholm
Author

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

TitanKing commented on Jul 5, 2018

@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

farwayer commented on Jul 5, 2018

@farwayer
Contributor

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.

21 remaining items

devthejo

devthejo commented on Sep 10, 2018

@devthejo

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

thereis

thereis commented on Sep 13, 2018

@thereis

I'm having the same issue with RN 0.57

LinusU

LinusU commented on Sep 14, 2018

@LinusU
Contributor

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

LinusU commented on Sep 14, 2018

@LinusU
Contributor

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

added
Tech: Bundler 📦This issue is related to the bundler (Metro, Haul, etc) used.
and removed on Sep 18, 2018

23 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @cpojer@hramos@LinusU@TitanKing@williscool

        Issue actions

          Bundle failure on decorators · Issue #19955 · facebook/react-native