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

[damianobarbati]

I'm reporting an error I get for every React component exported after I upgraded to @babel/*@^7.0.0-beta.37:

ERROR in ./apps/visitor/components/List.js
Module build 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?

I already checked this out https://github.com/babel/babel/issues/7122 where the problem was a version mismatch but it does not seem my case.

Babel config in package.json:

"babel": {
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false,
                "useBuiltIns": "usage",
                "debug": true
            }
        ],
        "@babel/preset-stage-0",
        "@babel/preset-react"
    ],
    "plugins": [
        "lodash",
        "@babel/plugin-proposal-decorators",
        [
            "@babel/plugin-proposal-class-properties",
            {
                "loose": true
            }
        ]
    ]
},

Dependencies version:

"devDependencies": {
    "@babel/core": "^7.0.0-beta.37",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.37",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.37",
    "@babel/polyfill": "^7.0.0-beta.37",
    "@babel/preset-env": "^7.0.0-beta.37",
    "@babel/preset-react": "^7.0.0-beta.37",
    "@babel/preset-stage-0": "^7.0.0-beta.37",
    "babel-eslint": "8.2.1",
    "babel-jest": "22.0.4",
    "babel-loader": "8.0.0-beta.0",
    "babel-minify-webpack-plugin": "0.2.0",
    "babel-plugin-lodash": "3.3.2",
    ...
}

Thanks for the amazing work on this project as always 💪🏻

[babel-bot]

Hey @damianobarbati! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[damianobarbati]

Ok it turn out to be about @babel/plugin-proposal-decorators, got it working with the following versions:

"devDependencies": {
    "@babel/core": "^7.0.0-beta.37",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.37",
    "@babel/plugin-proposal-decorators": "7.0.0-beta.36",
    "@babel/polyfill": "^7.0.0-beta.37",
    "@babel/preset-env": "^7.0.0-beta.37",
    "@babel/preset-react": "^7.0.0-beta.37",
    "@babel/preset-stage-0": "^7.0.0-beta.37",
    "babel-eslint": "8.2.1",
    "babel-jest": "22.0.4",
    "babel-loader": "8.0.0-beta.0",
    "babel-minify-webpack-plugin": "0.2.0",
    "babel-plugin-lodash": "3.3.2",

[xtuc]

Interesting, there seems to be a regression in @babel/plugin-proposal-decorators then. Could you also please add the content of your ./apps/visitor/components/List.js file?

[damianobarbati]

Sure, here it is: https://github.com/damianobarbati/react-app/blob/babel-bug/apps/visitor/components/List.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';

import cx from 'classnames';
import { withStyles } from 'material-ui/styles';

import Grid from 'material-ui/Grid';
import Button from 'material-ui/Button';

@withStyles(theme => ({
    root: {
        ...theme.list,
        backgroundColor: 'red',
    },
}))
@connect((state, props) => ({ }))
export default class List extends React.Component {
    static propTypes = {
        dispatch: PropTypes.func.isRequired,
        classes: PropTypes.object.isRequired,
    };

    componentWillMount = () => {
        console.log('mounting list');
    };

    componentWillUnmount = () => {
        console.log('unmounting list');
    };

    go = pathname => () => {
        const { dispatch } = this.props;
        dispatch(push(pathname));
    };

    render = () => {
        const { classes } = this.props;
        const { dispatch } = this.props;

        console.log('rendering list');

        return (
            <Grid container={true} justify={'center'} alignContent={'center'} alignItems={'center'} wrap={'wrap'}>
                <Grid item={true} xs={12}>
                    <h1>List</h1>
                </Grid>

                <Grid item={true} xs={12}>
                    <Button raised={true} onClick={this.go('/')}>move to home</Button>
                </Grid>
            </Grid>
        );
    };
}

[TrejGun]

Same here
@damianobarbati thanks for workaround

[damianobarbati]

@xtuc same error for @babel/[email protected]
Sticking to 7.0.0-beta.36 for now

[damianobarbati]

@xtuc again same error for @babel/[email protected].
Still sticking to 7.0.0-beta.36 for now :\

        "@babel/core": "^7.0.0-beta.39",
        "@babel/plugin-proposal-class-properties": "^7.0.0-beta.39",
        "@babel/plugin-proposal-decorators": "7.0.0-beta.39",
        "@babel/polyfill": "^7.0.0-beta.39",
        "@babel/preset-env": "^7.0.0-beta.39",
        "@babel/preset-react": "^7.0.0-beta.39",
        "@babel/preset-stage-0": "^7.0.0-beta.39",

    Module build 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/damz/Desktop/react-app/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/modification.js:44:11)
        at PluginPass.Class (/Users/damz/Desktop/react-app/node_modules/@babel/plugin-proposal-class-properties/lib/index.js:225:14)
        at newFn (/Users/damz/Desktop/react-app/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:223:21)

[existentialism]

Possibly a plugin ordering issue, with proposal-class-properties running after proposals-decorators.

That being said, you shouldn't need to explicitly include proposal-decorators since it's already included via stage-0? Simply removing it, or placing class-properties before it seems to make your example build fine for me locally.

[seeden]

I have very similar issue https://github.com/babel/babel/issues/7281. Maybe it will help because I am using just stage-0 without explicit: proposal-class-properties and proposal-decorators. Issue is related just for target: node

[existentialism]

@seeden yeah, related. will try to get some time to dig further.

[damianobarbati]

@seeden are decorators in stage-0 now? Are those two plugins useless? BTW I tried without those two plugins and I get the same error

[seeden]

Yes decorators are working with stage-0 without additional plugin in babel 7. It is working fine with version 36. It is broken from version 37

[existentialism]

@damianobarbati the decorators plugin is in stage-1, which stage-0 includes.

[AndyBarron]

Can confirm that @babel/plugin-proposal-decorators is still broken with class-properties on all versions above 7.0.0-beta.36. Setting it to beta 36 still fixes this error.

[paradoxxxzero]

As a side note, using @babel/plugin-transform-classes works around the issue.

[damianobarbati]

@babel/plugin-proposal-decorators is still broken on 7.0.0-beta.40 => sticking to 7.0.0-beta.36 🤙🏻

[drcmda]

It seems to be related to the static property. The following will crash babel atm:

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'

@connect()
export default class Plugin extends React.PureComponent {
    static contextTypes = { session: PropTypes.object }
    render() {
        return null
    }
}

But when i remove static, like so:

@connect()
export default class Plugin extends React.PureComponent {
    contextTypes = { session: PropTypes.object }

... which would be wrong of course, but either way, babel happily transpiles.

[existentialism]

Yes, as I stated before, it's a plugin ordering issue introduced by some changes that landed after beta.36.

Reduced test case:

@dec()
export default class List {
  static foo = {
    bar: true,
  };
}

{
  "plugins": [
    "proposal-decorators",
    ["proposal-class-properties", { "loose": true }]
  ]
}

Unfortunately, I haven't had any time to dig further (sorry!), other than basically insertAfter doesn't know how to handle inserting the transpiled static stuff after the code's been transformed by proposal-decorators, but is fine when proposal-class-properties is run before it.

We'll update this as soon as me, someone from the team, or the community (🙏) can!

[damianobarbati]

Thanks for your efforts @existentialism (and community) 💪🏻

[jaganathanb]

For me, It worked when i changed from

export default class SomeClass extends React.Component { .... }

to

export default class SomeClass extends Component { .... }

[damianobarbati]

Any news on this guys? 🙏🏻

[stolinski]

I'm still seeing this with

    "@babel/core": "^7.0.0-beta.40",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.40",
    "@babel/plugin-proposal-decorators": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",

[damianobarbati]

Still seeing this in 7.0.0-beta.42! Am I the only one using decorators and having this?

[damianobarbati]

Still having it in 7.0.0-beta.43.

Here the config as always just for reference:

"@babel/core": "^7.0.0-beta.43",
"@babel/polyfill": "^7.0.0-beta.43",
"@babel/preset-env": "^7.0.0-beta.43",
"@babel/preset-react": "^7.0.0-beta.43",
"@babel/preset-stage-0": "^7.0.0-beta.43",

Any chance on this @existentialism ?

[damianobarbati]

Same in 7.0.0-beta.44: @hzoo can this be included in the next babel milestone? Because I think it's being totally ignored.
It's pretty weird to keep upgrading babel dependencies above 7.0.0-beta.44 while leaving @babel/preset-stage-0 to 7.0.0-beta.36 and I'm afraid sooner or later it's going to go totally broken as we go on with upgrades (and good bye decorators).

[nicolo-ribaudo]

We are currently working heavily on both the decorators and class-propertie transforms.

[damianobarbati]

That's good news! Thanks for breaking the silence about this @nicolo-ribaudo, let's just wait for next releases then.

[existentialism]

@damianobarbati thanks for continuing to follow this issue, and while it might seem it's "being totally ignored", it's really just that the team has a number of things we are working on (including totally revamping the decorators transform itself).

It's not that we don't want to fix this, we will... and even better, welcome any contributions towards a fix.

Again, the issue is a plugin ordering one, and running class-properties before decorators should work.

[firelizzard18]

BTW, this works for me if I change from export default class ... to export class ... (using @existentialism's minimal repro):

From:

@dec()
export default class List {
  static foo = {
    bar: true,
  };
}

To:

@dec()
export class List {
  static foo = {
    bar: true,
  };
}

[kouhin]

Again, the issue is a plugin ordering one, and running class-properties before decorators should work.

Thanks a lot. I placed class-properties before decorators and it worked.

This is my configuration:

{
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
        useBuiltIns: 'entry',
      },
    ],
    [
      '@babel/preset-stage-0',
      {
        decoratorsLegacy: true,
      },
    ],
    '@babel/preset-react',
  ],
  plugins: [
    'lodash',
    'date-fns',
    '@babel/plugin-proposal-class-properties'
  ],
}

But the current document...

https://github.com/babel/babel/tree/master/packages/babel-plugin-proposal-decorators#note-compatibility-with-babelplugin-proposal-class-properties

If you are including your plugins manually and using @babel/plugin-proposal-class-properties, make sure that @babel/plugin-proposal-decorators comes before @babel/plugin-proposal-class-properties.

[lili21]

I'm using @babel/[email protected] which includes @babel/plugin-proposal-class-properties and @babel/plugin-proposal-decorators. still have the issue.

[vjpr]

I am using @babel/preset-stage-0, and my issue was fixed by adding @babel/plugin-proposal-class-properties to plugins as @kouhin mentioned.

[existentialism]

@damianobarbati and others, can you test beta.49?

[damianobarbati]

@existentialism I tried but I cannot build with beta.49.
I get the following errors and even applying the suggested plugins, babel seems to ignore them 🙃

    ERROR in ./node_modules/reax-helpers/src/index.js
    Module build failed: SyntaxError: /Users/damz/Desktop/yarsk/node_modules/reax-helpers/src/index.js: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (1:8):

    > 1 | export createStore from './createStore';
        |        ^
      2 | export App from './App';
      3 | 
      4 | export EmitterProvider from './EmitterProvider';

    Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.

    ERROR in ./node_modules/reax-helpers/src/App.js
    Module build failed: SyntaxError: /Users/damz/Desktop/yarsk/node_modules/reax-helpers/src/App.js: Support for the experimental syntax 'classProperties' isn't currently enabled (6:22):

      4 | 
      5 | export default class App extends React.Component {
    > 6 |     static propTypes = {
        |                      ^
      7 |         children: PropTypes.node.isRequired,
      8 |         store: PropTypes.object.isRequired,
      9 |     };

    Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

[nicolo-ribaudo]

Try to rename .babelrc to babel.config.js (and module.export the config).

[damianobarbati]

I'm using package.json. I'm trying, gimme 60s.

[damianobarbati]

@nicolo-ribaudo @existentialism thanks!
I managed to build moving the configuration to babel.config.js.
It looks like props are not passed down from decorator to components because I get prop-types checking errors about undefined props.
But I cannot debug deeply before sunday evening!

Here the repro I'm using if you want to check it out:

git clone https://github.com/damianobarbati/yarsk/tree/babel-49
yarn install
yarn serve:dev
yarn build:dev

Does this mean we'll not be able to use package.json anymore for our babel config?
It was so handy and clean to have everything right there 😥

And as always => thanks for the great work!

[nicolo-ribaudo]

But I cannot debug deeply before sunday evening!

Me too :laughing:

Does this mean we'll not be able to use package.json anymore for our babel config?

package.json and babelrc aren't applied to inner packages anymore. When you are transpiling a file inside node_modules, Babel finds the package.json of that package and stops searching the configuration.

[drcmda]

@existentialism we still see the error, but in a rare situation where we dynamically import a module and use a webpack alias that leads out of the root dir for debugging purposes:

alias: {
    awv3: path.resolve('./../awv3')
}

import('awv3/plugins/csys/')

ERROR in ../awv3/plugins/csys/index.js
Module build 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/drcmda/dev/triangles/node_modules/@babel/traverse/lib/path/modification.js:57:11)

Both the main project and the aliased project are on babel@49

All the other cases that would previously throw the same error seem to be fixed.

[bugzpodder]

I have a clean repo for babel@7b49 in https://github.com/babel/babel/issues/8062 with the same error message (but might be a slightly unrelated issue)

[damianobarbati]

@nicolo-ribaudo actually props are passed down by the decorator but not in the first render thus prop-types complains about props being undefined. Is this the correct behaviour? Because I never had such complaining by prop-types previously :\

[damianobarbati]

Hey @nicolo-ribaudo, I just noticed that decorated component proptypes are somehow applied at runtime to enhanced component.

Decorator:

import React from 'react';
import PropTypes from 'prop-types';

import { Consumer } from './Router';

export default function withRouter (Component) {
    return class WithRouter extends React.PureComponent {
        render = () => {
            return (
                <Consumer>
                    {context => <Component {...this.props} router={context} />}
                </Consumer>
            );
        };
    };
}

Decorated:

import React from 'react';
import PropTypes from 'prop-types';

import { withRouter } from './';

@withRouter
export default class Link extends React.Component {
    static propTypes = {
        children: PropTypes.node,
        router: PropTypes.object.isRequired,
        href: PropTypes.string.isRequired,
        currentClassName: PropTypes.string,
        className: PropTypes.string,
    };

    render = () => {
        const { children, router, href, currentClassName, className, ...otherProps } = this.props;
        const computedClassName = cx(currentClassName ? { [currentClassName]: (router.pathname + router.search + router.hash) === href } : null, className);

        return (
            <a {...otherProps} onClick={router.redirect(href)} href={href} className={computedClassName}>{children}</a>
        );
    }
}

PropTypes complains about:

Warning: Failed prop type: The prop `router` is marked as required in `WithRouter`, but its value is `undefined`.
    in WithRouter (created by Nav)

But WithRouter (aka the enhanced component returned in my decorator) is not expecting or defining any proptype, those it is complaining about are defined in wrapped components instead.

The following is happening on every other decorator I'm using like this: what's wrong with my usage?

[damianobarbati]

Still having this weird behaviour in ^7.0.0-beta.51, but we have great progress here I see! 🙃

[damianobarbati]

@nicolo-ribaudo I think it's time to close this issue and mark it as resolved, isn't it?

(And open a new one for the unexpected behaviour reported previously?)

[nicolo-ribaudo]

Yes thank you, in this issue have been reported so many different problems that it has become hard to follow them.

[dluksza]

I'm getting this error message on my mobile app build with react-native 0.56.0-rc.3 (react 16.4.1).

First time I got this was on react-native 0.56.0-rc.2, but then removing node_modules and installing all dependencies again was fixing it. Right not this workaround doesn't work any more :|

[Titozzz]

@dluksza As @Ashoat said in https://github.com/facebook/react-native/issues/20038, It is maybe related to babel 7 + react-native-modal.

[EyMaddis]

Just a heads up:

Try to rename .babelrc to babel.config.js (and module.export the config).

Might break builds on React Native, because the build tools are using babel too. Using babel.config.js will completely override all nested babel configurations.