question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

"We don't know what to do with this node type" error using @babel/plugin-proposal-class-properties

See original GitHub issue

Bug Report

Current Behavior Error using @babel/plugin-proposal-class-properties:

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

Input Code

Repo: https://github.com/xcrzx/babel-class-properties

export default class Foo extends Bar {
    static foo = {};

    test = (...args) => {
        console.log(...args);
    };
}

The error appears only if I have static foo = {};, export default, extends Bar and (...args) all together.

Babel Configuration (.babelrc, package.json, cli command)

babel.config.js:

module.exports = {
  plugins: ['@babel/plugin-proposal-class-properties'],
};

Environment

  • Babel version(s): [v7.0.0-beta.47]
  • Node/npm version: [Node 9.11.1/npm 6.0.0]
  • OS: [OSX 10.13.4]
  • Monorepo [no]
  • How you are using Babel: [cli, loader]

Additional context/Screenshots The error appeared when I upgraded babel packages from v7.0.0-beta.44 to v7.0.0-beta.47.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
remcohaszingcommented, May 25, 2018

Some additional info:

  • The export doesn’t have to be default.
  • The test method must be a class property defining a function. I.e., it’s fine if it’s a regular method.
  • The problem is only triggered for a variable named args.
  • The variable args doesn’t have to be defined.
  • The variable args may be used in other ways as well.

Another example triggering the error:

export class Foo extends Bar {
  static foo = {};

  test = function () {
      args;
  };
}

Edit: even this triggers the error:

export class Foo extends Bar {
  static foo = {};

  test = args;
}
0reactions
loganfsmythcommented, May 28, 2018

Deduping against #7177 since it appears to be the same issue and was filed earlier.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Error: Missing class properties transform
The fix in my case was defining 'transform-class-properties' plugin in the options attribute of my webpack.config.js, i'm using babel V6
Read more >
@babel/plugin-proposal-class-properties | ...
Intro. Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain...
Read more >
How to combine Webpack 4 and Babel 7 to create a ...
You need to have node installed in order to use npm (node package manager). First things first, create a folder called app then...
Read more >
options has an unknown property 'before'. these ...
this line is broken: https://github.com/gregberge/error-overlay-webpack-plugin/ ... I don't know why option importLoaders is returning error if specified in ...
Read more >
webpack Tutorial: How to Set Up webpack 5 From Scratch
If you don't feel comfortable setting up webpack from scratch for use ... you can use built in asset modules; Node polyfills are...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found