Can't use fat arrow functions (ES6) in react

Question

I've had some issues using fat arrow functions in react. If the function is not anonymous, it complains about the syntax and won't compile.

This:

handleItemClick = (e, { name }) => this.setState({ activeItem: name });

Gives me:

BabelLoaderError: SyntaxError: Unexpected token (20:20)

It points to the equal sign(handleItemClick'=').

This however works just fine:

onClick={ (arg) => {//Do something} };

Is there something wrong with my webpack config, or something else i'm missing? Thankful for any hints.

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,
                ]
            }
        ]
    }
};

Answer 1

You are trying to use class fields, which are not part of ES6, and aren't covered by es2015, and react presets.

You can enable it by using the Class properties transform babel plugin:

query: {
    presets: ['es2015', 'react'],
    plugins: ["transform-class-properties"]
}   

Or use the babel stage-2 preset, that includes the transform plugin:

query: {
    presets: ['es2015', 'react', 'stage-2']
}

Don't forget to npm install the one that you choose.