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?"

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)

Most upvoted comments

The easiest workaround for now is simply to remove the export from the ReactNativeModal 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 patch react-native-modal. The export can be redeclared later with export { 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 of react-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.

export class Bug {

  // To get the same error we're seeing, this static declaration is necessary.
  // However, the error we're seeing is likely hiding another one, because if
  // this declaration is removed, another error occurs.
  static blah = {};

  constructor(props) {
    this.test(props);
  }

  test = (props) => {
    // This is the line that is actually causing the real error
    const test = props.test;
  }
}

export default Bug;

The original error that appears when the static declaration is left alone is:

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 (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/modification.js:55:11)
    at PluginPass.Class (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/plugin-proposal-class-properties/lib/index.js:257:14)
    at newFn (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/visitors.js:237:21)
    at NodePath._call (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/context.js:65:20)
    at NodePath.call (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/context.js:100:12)
    at TraversalContext.visitQueue (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/context.js:142:16)
    at TraversalContext.visitSingle (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/context.js:102:19)
    at TraversalContext.visit (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/context.js:182:19)

When the static declaration is removed, the real error is revealed:

error: bundling failed: TypeError: Property body[1] of BlockStatement expected node to be of a type ["Statement"] but instead got "ClassExpression"
    at validate (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/definitions/utils.js:130:13)
    at validator (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/definitions/utils.js:97:7)
    at Object.validate (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/definitions/utils.js:177:7)
    at validate (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/validators/validate.js:17:9)
    at builder (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/builders/builder.js:46:27)
    at Object.BlockStatement (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/types/lib/builders/generated/index.js:245:31)
    at NodePath.replaceExpressionWithStatements (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/replacement.js:212:57)
    at NodePath.insertBefore (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/modification.js:47:17)
    at NodePath.unshiftContainer (/Users/ashoat/Dropbox/src/rn56babelbug/node_modules/@babel/traverse/lib/path/modification.js:204:15)

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.