Unexpected token '=' in React Component [duplicate]
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
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"]
}