Skip to content

Bundle failure on decorators #19955

New issue
New issue
Closed
Closed
Bundle failure on decorators#19955
Labels
BugJavaScriptResolution: LockedThis issue was locked by the bot.Tech: Bundler 📦This issue is related to the bundler (Metro, Haul, etc) used.
@haggholm

Description

@haggholm
haggholm
opened on Jun 28, 2018 · edited by 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

react-native-bot
added
⏪Old Version
Platform: LinuxBuilding on Linux.
on Jun 28, 2018
j-mendez

j-mendez commented on Jun 29, 2018

@j-mendez
j-mendez
on Jun 29, 2018

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

kelset

kelset commented on Jul 2, 2018

@kelset
kelset
on Jul 2, 2018
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
haggholm
on Jul 3, 2018
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
kelset
on Jul 4, 2018
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
haggholm
on Jul 4, 2018
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

hyochan
mentioned this on Jul 5, 2018
TitanKing

TitanKing commented on Jul 5, 2018

@TitanKing
TitanKing
on Jul 5, 2018

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
farwayer
on Jul 5, 2018 · edited by 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.

kelset
added
JavaScript
🔧Tooling
and removed
⏪Old Version
Platform: LinuxBuilding on Linux.
on Jul 6, 2018
haggholm
mentioned this on Jul 7, 2018

21 remaining items

devthejo

devthejo commented on Sep 10, 2018

@devthejo
devthejo
on Sep 10, 2018

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
thereis
on Sep 13, 2018

I'm having the same issue with RN 0.57

LinusU

LinusU commented on Sep 14, 2018

@LinusU
LinusU
on Sep 14, 2018
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
LinusU
on Sep 14, 2018 · edited by 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

LinusU
mentioned this on Sep 14, 2018
kelset
added
Tech: Bundler 📦This issue is related to the bundler (Metro, Haul, etc) used.
and removed
🔧Tooling
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

    BugJavaScriptResolution: LockedThis issue was locked by the bot.Tech: Bundler 📦This issue is related to the bundler (Metro, Haul, etc) used.

    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