Parcel: Unexpected error with state={} in react class component

[tnrich]

Hey there,

I'm getting the following error:

/Users/tnrich/Sites/treeview/Comp.js:10:7: Unexpected token (10:7)                     elDigestEnzymes });
> 10 |   state={
     |        ^

from the following piece of code

export default class Ladder extends React.Component {
  state={
    highlightedFragment: undefined 
  }

The following code works and does the same thing, but I'd like to be able to do the top version.

export default class Ladder extends React.Component {
  // constructor(props) {
  //   super(props);
  //   this.state = { highlightedFragment: undefined };
  // }

Does anyone know which babel transform I need to enable to get this to work? Thanks!

[DimaLiLongJi]

I think you should use super() in constructor() {} before you use this when u extend a class.
In react docs, it's

 constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

[devongovett]

https://babeljs.io/docs/plugins/transform-class-properties/

[silvestrevivo]

@devongovett thanks man!!! Problem resolved!!!

[antonrud]

@devongovett thx for the link!

However the main problem for me was my webpack config. Just deleted Babel options from _webpack.config.js_ and used only _.babelrc_ configuration instead.

webpack.config.js before

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: {presets: ['env', 'react']}  //bad line here
      },
...

webpack.config.js after

  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader'
      },
...

.babelrc

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties"
  ]
}

[ghost]

I have the same problem but with the Aribnb linter...