He tenido algunos problemas al usar funciones de flecha gruesa en reaccionar. Si la función no es anónima, se queja de la sintaxis y no se compila.
Este:
handleItemClick = (e, { name }) => this.setState({ activeItem: name });me da:
BabelLoaderError: SyntaxError: Unexpected token (20:20)Apunta al signo igual (handleItemClick'=').
Sin embargo, esto funciona bien:
onClick={ (arg) => {//Do something} };¿Hay algún problema con la configuración de mi paquete web o me falta algo más? Agradecido por cualquier pista.
module.exports = { entry: PATHS.app_path, output:{ path: PATHS.build, filename: 'index.js' }, devServer:{ inline: true, port: 3333, contentBase: PATHS.build, publicBase: PATHS.build, historyApiFallback: true }, resolve: { root: path.resolve('./public'), extensions: ['', '.js', '.jsx'] }, module: { loaders: [ { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015', 'react'] } }, { test: /\.css$/, loader: 'style-loader' }, { test: /\.css$/, loader: 'css-loader', query: { modules: true, localIdentName: '[local]' //localIdentName: '[name]__[local]___[hash:base64:5]' } }, { test: /\.(png|woff|woff2|eot|ttf|jpg)$/, loader: 'url-loader?limit=100000' }, { test: /.*\.svg$/, loaders: [ 'file-loader', 'svgo-loader?' + svgoConfig, ] } ] } };Está tratando de usar campos de clase , que no son parte de ES6, y no están cubiertos por es2015, y reaccionar preestablecidos.
Puede habilitarlo usando el complemento de babel de transformación de propiedades de clase :
query: { presets: ['es2015', 'react'], plugins: ["transform-class-properties"] }O use el ajuste preestablecido babel stage-2 , que incluye el complemento de transformación:
query: { presets: ['es2015', 'react', 'stage-2'] } No olvide npm install el que elija.