Unexpected token '=' in React Component [duplicate]

Question

Am I missing a loader possibly? I thought we were supposed to be able to use these ES6 functions in component bodies to avoid having to do the .bind(this) syntax react docs

    ERROR in ./client/admin-side/components/Form.jsx
Module build failed: SyntaxError: Unexpected token (15:17)

  14 | 
> 15 |     handleChange = (event) => {
     |                  ^
  16 |         this.setState({value: event.target.value})
  17 |     }

My .babelrc has the following:

{
    "presets": ["env", "react"],
    "plugins": ["transform-object-rest-spread"]
}

and I am using babel-loader for js/jsx documents

Answer 1

You need to use transform-class-properties plugin to use class fields, You can install it like

npm install --save-dev babel-plugin-transform-class-properties

and use it as a plugin

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

transform-object-rest-spread is used for the rest spread syntax which is like

const {a, b, ...rest} = this.props

According to the documentation:

This presents two related proposals: "class instance fields" and "class static fields".

"Class instance fields" describe properties intended to exist on instances of a class (and may optionally include initializer expressions for said properties).

"Class static fields" are declarative properties that exist on the class object itself (and may optionally include initializer expressions for said properties).

This proposal is currently at Stage 2.

You can also solve this by using preset stage-2 by installing

npm install --save-dev babel-preset-stage-2

and using it like

{
    "presets": ["env", "react", "stage-2"],
    "plugins": ["transform-object-rest-spread"]
}