Arrow Function syntax not working with webpack?

Also if you want to get used to new babel show, you can use babel.config.js file instead of .babelrc. The idea is like something like webpack.config.js file , but for babel configurations. It is been used like below:

module.exports = {
  presets: [ "@babel/preset-env", "@babel/preset-react" ],
  plugins: [ "@babel/plugin-transform-arrow-functions", "@babel/plugin-proposal-class-properties" ]
}

Make sure to install all of those plugins to compile successfully. I should say that babel itself just recommended to do all of these stuff in .babelrc file to every one. But you know, we are not every one.

This is exactly what worked for me:

1) Install babel-plugin-transform-class-properties:

sudo npm install --save-dev babel-plugin-transform-class-properties

2) Add options (not query) to your rules:

module.exports = {
    ..........
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                options: {
                    presets: ['env', 'react', 'es2015'],
                    plugins: ['transform-class-properties']
                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    ..........
};

First you needed to edit the .babelrc file to

{
 "presets": ["react", ["es2016"]],
 "plugins": [
     "babel-plugin-transform-class-properties"
  ]
}

Second npm install babel-plugin-transform-class-properties and babel-preset-es2016

Stab in the dark, is this function inside a class? Arrow functions that are members of a class are not included in ES2015 (or 2016). If you want to do something like:

class Foo {
  bar = (baz) => {
    console.log(baz);
  } 
}

You'll need to include babel-transform-class-properties.

In your example, you'll need to:

npm install --save-dev babel-plugin-transform-class-properties

and change your loader to

{
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre'],
          plugins: ['transform-class-properties']
        }
      }