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

haggholm · 2018-07-04T21:09:20Z

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.

The text was updated successfully, but these errors were encountered:

haggholm · 2018-07-05T02:10:51Z

(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 · 2018-07-05T04:42:57Z

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 · 2018-07-05T15:23:21Z

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 · 2018-07-05T15:25:27Z

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

mmazzarolo · 2018-07-05T15:55:16Z

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 · 2018-07-05T15:59:54Z

@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 · 2018-07-05T16:05:08Z

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 · 2018-07-05T16:11:20Z

I'm trying your fix right now @Ashoat

EDIT: it's working for me. @mmazzarolo

EDIT 2: I'll create a PR.

Ashoat · 2018-07-05T16:57:42Z

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 · 2018-07-05T17:24:01Z

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

dluksza · 2018-07-05T18:13:05Z

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 · 2018-07-05T18:16:22Z

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

dluksza · 2018-07-05T18:25:56Z

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 · 2018-07-05T18:29:36Z

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

dluksza · 2018-07-05T19:08:42Z

@mmazzarolo thank you!

dchersey · 2018-07-10T21:14:14Z

@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 · 2018-07-13T21:07:34Z

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.

haggholm mentioned this issue Jul 4, 2018

Bundle failure on decorators #19955

Closed

3 tasks

react-native-bot added ⏪Old Version Platform: Linux Building on Linux. labels Jul 4, 2018

kelset added JavaScript and removed ⏪Old Version Platform: Linux Building on Linux. labels Jul 5, 2018

react-native-bot added ⏪Old Version Platform: Linux Building on Linux. labels Jul 5, 2018

This was referenced Jul 5, 2018

Error: We don't know what to do with this node type. We were previously a Statement but we can't fit in here? babel/babel#7177

Closed

App on babel error after upgrading to RN 0.56.0 react-native-modal/react-native-modal#178

Closed

anonrig mentioned this issue Jul 5, 2018

Update react-native-modal tschoffelen/react-native-map-link#32

Closed

haggholm mentioned this issue Jul 7, 2018

[0.56.0] Cannot import re-exported named symbols #20083

Closed

3 tasks

Ashoat closed this as completed Jul 13, 2018

Ashoat mentioned this issue Jul 13, 2018

Issue with export class Bug { ... }; export default Bug; in Babel 7 facebook/metro#199

Closed

facebook locked as resolved and limited conversation to collaborators Jul 18, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 18, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

haggholm commented Jul 4, 2018

haggholm commented Jul 5, 2018

AlicanC commented Jul 5, 2018

Ashoat commented Jul 5, 2018 •

edited

Loading

Titozzz commented Jul 5, 2018 •

edited

Loading

mmazzarolo commented Jul 5, 2018 •

edited

Loading

Titozzz commented Jul 5, 2018 •

edited

Loading

Ashoat commented Jul 5, 2018

Titozzz commented Jul 5, 2018 •

edited

Loading

Ashoat commented Jul 5, 2018

mmazzarolo commented Jul 5, 2018

dluksza commented Jul 5, 2018

Ashoat commented Jul 5, 2018

dluksza commented Jul 5, 2018 •

edited

Loading

mmazzarolo commented Jul 5, 2018

dluksza commented Jul 5, 2018

dchersey commented Jul 10, 2018

Ashoat commented Jul 13, 2018

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

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

Comments

haggholm commented Jul 4, 2018

Environment

Description

haggholm commented Jul 5, 2018

AlicanC commented Jul 5, 2018

Ashoat commented Jul 5, 2018 • edited Loading

Titozzz commented Jul 5, 2018 • edited Loading

mmazzarolo commented Jul 5, 2018 • edited Loading

Titozzz commented Jul 5, 2018 • edited Loading

Ashoat commented Jul 5, 2018

Titozzz commented Jul 5, 2018 • edited Loading

Ashoat commented Jul 5, 2018

mmazzarolo commented Jul 5, 2018

dluksza commented Jul 5, 2018

Ashoat commented Jul 5, 2018

dluksza commented Jul 5, 2018 • edited Loading

mmazzarolo commented Jul 5, 2018

dluksza commented Jul 5, 2018

dchersey commented Jul 10, 2018

Ashoat commented Jul 13, 2018

Ashoat commented Jul 5, 2018 •

edited

Loading

Titozzz commented Jul 5, 2018 •

edited

Loading

mmazzarolo commented Jul 5, 2018 •

edited

Loading

Titozzz commented Jul 5, 2018 •

edited

Loading

Titozzz commented Jul 5, 2018 •

edited

Loading

dluksza commented Jul 5, 2018 •

edited

Loading