Description
- Review the documentation: https://facebook.github.io/react-nativeSearch for existing issues: https://github.com/facebook/react-native/issuesUse 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.
Activity
j-mendez commentedon Jun 29, 2018
@haani104 I am experiencing the same issue. Might be worth to wait until 56 is stable.
kelset commentedon 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 commentedon 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 commentedon 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 commentedon Jul 4, 2018
After purging some old Babel plugins, pinning the versions of all
@babel/
-scoped packages to match the precise version pinned bybabel-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: #20038TitanKing commentedon 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 commentedon Jul 5, 2018
I have another problem with decorators with 0.56 in release build only:
P.S. "Old Version" tag should be removed.
21 remaining items
devthejo commentedon Sep 10, 2018
I've solved it using beta.47 version of babel (like the ReactNative'one)
see babel/babel#7831 (comment)
thereis commentedon Sep 13, 2018
I'm having the same issue with RN 0.57
LinusU commentedon 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:
This is my
.babelrc
:and the relevant part of
package.json
:Currently trying to figure out what's wrong and where the fix should be applied...
LinusU commentedon 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:
Together with
npm add @babel/runtime
23 remaining items