Arrow Function syntax not working with webpack?

Question

I\'m making an app on react-redux. I\'m using webpack for bundling and babel for transpiling. When I am try to use arrow function in my code. It gives me error as :

Answer 1

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

Answer 2

In my application, this issue was caused by less-loader mistakenly added as dependent package instead of devDependency.

Moving less-loader from dependencies to devDependencies in package.json file resolved the issue.

Answer 3

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']
        }
      }

Answer 4

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.

Answer 5

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