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

[haggholm]

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

[Titozzz]

@mmazzarolo Right now the only thing I found is not a fix but a workaround... I transpiled your code to ES5 using repl and replaced it... but it works 😭

[Ashoat]

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

[Titozzz]

I'm trying your fix right now @Ashoat

EDIT: it's working for me. @mmazzarolo

EDIT 2: I'll create a PR.

[Ashoat]

I'd like to report the bug to the Babel team, but I'm not sure how to reproduce it outside a React Native environment. I tried to create a minimal repro using babel-preset-react-native, but I can't get the bug to happen.

However, I did get a minimal React Native repro working.

Does anybody who knows more about how Metro uses Babel know what I'm missing in the pure-Babel repro?

[mmazzarolo]

I just released a new minor version of react-native-modal with the fix proposed by @Ashoat (submitted by @Titozzz ).
Thank you guys ❤️

[dluksza]

I'm still experiencing this error after bumping version of react-native-modal to 6.2.0. Probably one of my other dependencies is causing this issue. @Ashoat could you be more specific how did you manage to narrow down this issue to react-native-modal, maybe then I can find what is causing it in my project

[Ashoat]

I just opened the file in the stacktrace and added console.log statements. There was some variable called parentFile or something like that.

[dluksza]

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.

[mmazzarolo]

Yep, just released a new version of that one as well!

[dluksza]

@mmazzarolo thank you!

[dchersey]

@Ashoat and @mmazzarolo thank you very much for treading this path ... I followed in your footsteps with only the effort of googling the right search. Successfully running RN 0.56 with react-native-modal 6.2.0 and babel 7.

  "devDependencies": {
    "@babel/core": "7.0.0-beta.44",
    "babel-jest": "23.4.0",
    "babel-preset-react-native": "^5",
    "jest": "22.0.4"
  },

[Ashoat]

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.