Bundle failure on decorators

[haggholm]

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