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

[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 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.

[haggholm]

(I’m a bit perplexed by this “Old Version” tag the bot applies. I filed this mere hours after 0.56 was released, which doesn’t sound very old to me…)

[AlicanC]

The preset doesn't have the decorators plugin though:
https://github.com/facebook/metro/blob/master/packages/metro-react-native-babel-preset/package.json

[Ashoat]

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)

[Titozzz]

I have the same issue and i'm also using react-native-modal, I'm trying to update right now ..

[mmazzarolo]

Hi there, I'm the RN modal maintainer.
Thanks @Ashoat for investigating and @Titozzz for reporting the issue.

Unfortunately I'm super busy today so I can't investigate further but if you're willing to submit a PR / proposing a fix I can push a new release ASAP on npm.