reactjs - Token inesperado ''='' en React Component

babel

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo usar las funciones de flecha (campos de clase pública) como métodos de clase? 4 respuestas
• No se pueden usar las funciones de flecha dentro de la clase de componente de reacción [duplicado] 2 respuestas
• Reaccionar Webpack "token inesperado" llamado función de flecha 1 respuesta

¿Me estoy perdiendo un cargador posiblemente? Pensé que se suponía que debíamos usar estas funciones ES6 en los cuerpos de los componentes para evitar tener que hacer la .bind(this) reaccionar documentos

 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 | }

Mi .babelrc tiene lo siguiente:

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

y estoy usando babel-loader para documentos js / jsx

Answer 1

no puede agregar preajuste de etapa 0

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

y no te olvides de correr

yarn add babel-preset-stage-0

Answer 2

transform-class-properties plugin usar el transform-class-properties plugin para usar los campos de clase, puede instalarlo como

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

y úsalo como complemento

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

transform-object-rest-spread se usa para la sintaxis de propagación de descanso que es como

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

De acuerdo con la documentation :

Esto presenta dos propuestas relacionadas: "class instance fields" y "class static fields" .

"Class instance fields" describen propiedades destinadas a existir en instancias de una clase (y opcionalmente pueden incluir expresiones de inicializador para dichas propiedades).

"Class static fields" son propiedades declarativas que existen en el propio objeto de clase (y opcionalmente pueden incluir expresiones de inicializador para dichas propiedades).

Esta propuesta se encuentra actualmente en la Etapa 2 .

También puede resolver esto utilizando la etapa 2 preestablecida instalando

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

y usándolo como

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