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?

@therewillbecode didn't help

Ajay Gaur
– Ajay Gaur

2017-02-06 09:33:12 +00:00
Commented Feb 6, 2017 at 9:33 — Ajay Gaur
– Ajay Gaur, Commented Feb 6, 2017 at 9:33

Joe Ruello · Accepted Answer · 2017-02-06 09:30:27Z

87

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

edited Feb 6, 2017 at 9:30

answered Feb 6, 2017 at 9:28

Joe Ruello

1,2069 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ajay Gaur Over a year ago

Yes, this function is in a class :(

Vlado · Accepted Answer · 2018-05-04 08:09:26Z

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

halfer · Accepted Answer · 2018-10-13 22:24:29Z

5

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.

edited Oct 13, 2018 at 22:24

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Oct 5, 2018 at 14:20

amdev

7,8207 gold badges51 silver badges69 bronze badges

Comments

LeftyX · Accepted Answer · 2019-04-30 12:21:06Z

2

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

edited Apr 30, 2019 at 12:21

LeftyX

35.6k21 gold badges140 silver badges201 bronze badges

answered Aug 11, 2018 at 7:35

wenningzhang

3292 silver badges10 bronze badges

Comments

sree · Accepted Answer · 2019-11-03 22:28:05Z

0

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.

answered Nov 3, 2019 at 22:28

sree

2,40730 silver badges28 bronze badges

Collectives™ on Stack Overflow

Arrow Function syntax not working with webpack?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related