Arrow functions not compiling

Question

I've been using Reactjs.net with Visual Studio and it compiles .jsx files that contain class methods defined using arrow functions syntax...

class A {

   m = () => {
   }
}

I've set up Webpack with ES2017 preset but it's giving an "unexpected token" error for the equals sign after the method name.

Why doesn't this compile?

Here is the loader section from my config...

module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2017', 'react']
                }
            }
        ]
    }

I'm curious about this too. Never gotten it to work myself. `m: () =>` should work. Have you tried the `es2018` preset? Is that even a thing? — Sidney, Jan 20 '18 at 00:49
I think it's because I'm missing a 'stage'. What is a stage? — Ian Warburton, Jan 20 '18 at 00:51
[Babel Transform Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) — Arman Charan, Jan 20 '18 at 01:02

score 0 · Accepted Answer · answered Jan 20 '18 at 00:58

0

I installed https://babeljs.io/docs/plugins/preset-stage-2/

And added 'stage-2' to the list of presets.

I worked out this solution after turning on and off the presets here with some sample code...

https://babeljs.io/repl

answered Jan 20 '18 at 00:58

Ian Warburton

13,336
19
85
164

1

Bingo. In case you're still wondering what a stage is: https://stackoverflow.com/questions/37251552/whats-the-difference-between-babel-preset-stage-0-babel-preset-stage-1-etc – Sidney Jan 20 '18 at 01:00

Arrow functions not compiling

1 Answers1