0

estoy haciendo un simple contador de clicks en react con webpack pero obtengo este error y no se como solucionarlo. Adjunto imagenes de mi codigo este es mi package.json introducir la descripción de la imagen aquí

Este es mi componente de react con el error que me da introducir la descripción de la imagen aquí

Mi configuracion de webpack introducir la descripción de la imagen aquí

Y mi configuracion de babel introducir la descripción de la imagen aquí

Les agradezco si me pueden ayudar. Buen dia.

3 respuestas 3

1

Estás tratando de declarar una constante dentro del cuerpo de una clase. Eso no esta permitido. Para que tu metodo funcione, cambiá handleClick a:

handleClick = (e) => {
  e.preventDefault()
  console.log('Diste click..')
}

Ejemplo:

class App extends React.Component {

  handleClick = (e) => {
    e.preventDefault();
    const mensaje = 'Bienvenido!';
    console.log('Diste click..');
    console.log(mensaje);
  }

  render() {
    const titulo = 'Super App'
    return (
      <div>
        <h1>{titulo}</h1>
        <button onClick={this.handleClick}>APRETAR</button>
      </div>
    );
  }

}

ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Puedes declarar variables o constantes dentro de funciones. Pero no en el cuerpo de la clase.

0

Probablemente, el problema es que estas pisando la configuracion de babel en tu webpack.config.js, por lo que el set de presets y plugins que especificas en el .babelrc no tiene efecto.

Intenta usar esta configuracion:

// ...
rules: [
  // ...
  {
    test: /\.jsx?$/),
    exclude: /node_modules/,
    use: 'babel-loader'
  }
]
0

No hace falta crear una configuracion para webpack, simplemente instala los siguientes paquetes:

babel-loader
webpack
webpack-cli 
webpack-dev-server

puedes hacer con el siguiente comando:

npm i @babel/core @babel/preset-env babel-loader webpack webpack-cli webpack-dev-server

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.