react-native: Babel error: "Error: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?"
- 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 AMD FX(tm)-6300 Six-Core Processor
Memory: 4.52 GB / 31.32 GB
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 10.4.0 - ~/.nvm/versions/node/v10.4.0/bin/node
npm: 6.1.0 - ~/.nvm/versions/node/v10.4.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
Android SDK:
Build Tools: 23.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 27.0.3
API Levels: 23, 25, 26, 27
npmPackages:
@client/react: ^1.0.13 => 1.0.63
@client/react-native: ^1.0.13 => 1.0.63
react-native: ^0.56.0 => 0.56.0
Description
With Webpack, everything works fine. With react-native
, it fails, using the same Babel setup except that I use babel-preset-react-native
instead of @babel/preset-env
. Other Babel config:
Internal preset
presets: [
['babel-preset-react-native', { decoratorsLegacy: true }]
// or
['@babel/preset-env', { target: { browser: /* ... */ } }]
],
plugins: [
'@babel/plugin-transform-flow-comments',
'@babel/plugin-transform-react-jsx',
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-syntax-dynamic-import',
'babel-plugin-lodash',
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true}],
]
.babelrc
{
"presets": [
[
"witkit-client",
{}
]
],
"plugins": [
"transform-inline-environment-variables",
"babel-plugin-transform-flow-strip-types",
[
"module-resolver",
{
"root": [
"/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root"
],
"alias": {
"fs": "/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/shim/empty",
"path": "/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/shim/empty",
"node-localstorage": "/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/shim/empty",
"stream": "stream-browserify",
"vm": "/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/shim/empty",
"modernizr.*$": "@client/modernizr",
"browsernizr.*$": "@client/modernizr",
"elk-theme-list": "/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/cache/react-native-theme-list.js",
"react-addons-shallow-compare": "shallow-compare",
"react-dom/lib/CSSProperty": "/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/shim/react-dom-css-property",
"react/lib/ReactPropTypes": "prop-types",
"@client/account-settings/settings/versions/versions.native.js": "/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/cache/VersionList.native.js"
}
}
]
]
}
Error:
Loading dependency graph, done.
error: bundling failed: Error: We don't know what to do with this node type. We were previously a Statement but we can't fit in here?
at NodePath.insertBefore (/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/node_modules/@babel/traverse/lib/path/modification.js:55:11)
at PluginPass.Class (/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/node_modules/@babel/plugin-proposal-class-properties/lib/index.js:257:14)
at newFn (/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/node_modules/@babel/traverse/lib/visitors.js:237:21)
at NodePath._call (/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/node_modules/@babel/traverse/lib/path/context.js:65:20)
at NodePath.call (/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/node_modules/@babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/node_modules/@babel/traverse/lib/path/context.js:100:12)
at TraversalContext.visitQueue (/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/node_modules/@babel/traverse/lib/context.js:142:16)
at TraversalContext.visitSingle (/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/node_modules/@babel/traverse/lib/context.js:102:19)
at TraversalContext.visit (/mnt/scratch/shared/petter/witkit-devenv/client-react-native-0.56/root/node_modules/@babel/traverse/lib/context.js:182:19)
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.
It seems likely that this is related to the decorators plugin, but the relevant stuff seems to work fine in Webpack but fail with RN, in spite of using the same config for decorators and class-props plugins, the same version of all the @babel/
packages (pinned to the same 7.0.0-beta.47
as babel-preset-react-native
), &c.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 12
- Comments: 17 (7 by maintainers)
The easiest workaround for now is simply to remove the
export
from theReactNativeModal
declaration.The bug is with Babel, not
react-native-modal
. However, given Babel will probably take a while to patch, it’s probably easiest to patchreact-native-modal
. The export can be redeclared later withexport { ReactNativeModal }
.Yep, just released a new version of that one as well!
Thanks @Ashoat , I’ve found it. Another culprit is
react-native-modal-datetime-picker
which relies on old version ofreact-native-modal
EDIT: new version (6.0.0) of
react-native-modal-datetime-picker
should not have this issue any more.I am experiencing this issue, so I investigated it a bit. I narrowed it down to
react-native-modal
by adding some logging statements to the Babel code.This appears to be a Babel 7 issue. I’ve figured out a minimal repro, and it’s quite weird.
The original error that appears when the static declaration is left alone is:
When the static declaration is removed, the real error is revealed:
Since I haven’t been able to repro the issue with raw Babel using
babel-preset-react-native
, my conclusion is that the issue has something to do with the way Metro consumes Babel. I created an issue in the Metro repro.Going to close this issue seems we’ve found a short-term workaround for the issue, and the Metro issue tracks the long-term issue.