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 :

Module build failed: SyntaxError: Unexpected token (34:15)  };  > handleSubmit = (event) => {                   ^   event.preventDefault();    this.props.dispatch(actions.addTodo(this.state.inputText)); 

My webpack configuration file looks like as follows :

module.exports = {   devtool: 'inline-source-map',   entry: [     'webpack-hot-middleware/client',     './client/client.js'   ],   output: {     path: require('path').resolve('./dist'),     filename: 'bundle.js',     publicPath: '/'   },   plugins: [     new webpack.optimize.OccurenceOrderPlugin(),     new webpack.HotModuleReplacementPlugin(),     new webpack.NoErrorsPlugin()   ],   module: {     loaders: [       {         test: /\.js$/,         loader: 'babel-loader',         exclude: /node_modules/,         query: {           presets: ['react', 'es2015', 'react-hmre']         }       }     ]   } }; 

and I'm using following babel packages in my package.json :

 "babel-cli": "^6.6.5", "babel-core": "^6.4.5", "babel-loader": "^6.2.2", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-react-hmre": "^1.1.1", 

What would have gone wrong?

Answer 1

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 2

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.