reactjs - Token inesperado ''='' en React Component
babel (2)
Esta pregunta ya tiene una respuesta aquí:
¿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
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
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"]
}