0

Estoy aprendiendo el uso del routing siguiendo el siguiente tutorial. Donde se importa bootstrap y se usa un navbar para navegar entre paginas. Se declaro el componente y la siguiente funcion:

getNavLinkClass = (path) => {
    return this.props.location.pathname === path ? 'active' : '';
}

Pero al transpilar me genera el siguiente error:

getNavLinkClass = (path) => {
|                     ^
|         return this.props.location.pathname === path 
              ?  'active' : '';
|     }
|     render() {

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL)
to the 'plugins' section of your Babel config to enable transformation.
at parser.next (<anonymous>)
at normalizeFile.next (<anonymous>)
         at run.next (<anonymous>)
      at transform.next (<anonymous>)


 @ ./assets/js/app.js 25:0-56

En mi package.json tengo configurado lo siguiente:

{
"devDependencies": {
  "@babel/plugin-proposal-class-properties": "^7.8.3",
  "@babel/preset-env": "^7.9.5",
"@babel/preset-react": "^7.9.4",
"@symfony/webpack-encore": "^0.29.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.4.1",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"webpack-notifier": "^1.8.0"
 },
"dependencies": {
"node-sass": "^4.14.0"
}
}

Edit Agregue el siguiente archivo .babel

{
 "plugins": [
   ["@babel/plugin-proposal-class-properties"]
 ]
}

Porque no estaba incorporado. No muestra el primer error pero ahora me genera lo siguiente:

Syntax Error: C:\xampp\htdocs\web_cotizacion_repuestos\assets\js\app.js:
  Unexpected token (17:8)

  15 |        render() {
  16 |         return (
> 17 |           <div>
     |             ^

Si me pueden orientar como solucionarlo, o tirarme una linea. En mi proyecto no tengo un archivo especifico de babel config, puede ser eso???

1
  • Puedes agregar tu babelrc? Commented el 29 abr. 2020 a las 17:40

1 respuesta 1

1

Instala el plugin en dev en el archivo package.json

 * npm install @babel/plugin-proposal-class-properties --save-dev

y edita tu archivo .babelrc o créalo en la raíz junto con tu package.json, copia y pega esto

{
  "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
  ],
  "plugins": [
      [
        "@babel/plugin-proposal-class-properties"
      ]
  ]
}

Tambien no se te olvide editar tu archivo webpack.config.js agregando esto

'plugins': ['@babel/plugin-proposal-class-properties']}]

Puedes ver mas detalles sobre la solución en este link

https://stackoverflow.com/questions/52237855/support-for-the-experimental-syntax-classproperties-isnt-currently-enabled/52504340#52504340

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.