CODEWITHSUNDEEP
ecmascript-6webpackbabeljs
Alex Turpin
Alex Turpin

Reputation: 47776

Webpack with ES6 presets not understanding ES6 syntax

I have a very basic project going for React with Webpack enabled ES6. This is what my Webpack config file looks like:

module.exports = {
    entry: './main.js',
    output: {
        path: './',
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 3333,
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

I have some React code with a component declared using class and that component has some arrow functions in it. When I run the page, the Webpack dev server shows the following error:

ERROR in ./App.js
Module build failed: SyntaxError: C:/Users/Alex/src/todo/App.js: Unexpected token (23:12)
  21 |  };
  22 |
> 23 |  handleOpen = () => {
     |             ^
  24 |          this.setState({open: true});
  25 |  };
  26 |

It seems that from reading on the Babel website, the preset 'es2015' ought to be enough. Am I missing something?

Upvotes: 0

Views: 279

Answers (1)

Marko Gresak
Marko Gresak

Reputation: 8217

This syntax is a part of ES Class Fields & Static Properties proposal, which is still in stage-1 as of writing this, so you have to add preset-stage-1 in order to use it.

If you use stage-0, it will also work.

Alterantively, you could use just the transform-class-properties plugin.

Upvotes: 3

Related Questions