ES6 Arrow Function Compile Error

Question

This code does not compile as expected, but looking at examples around the web in should.

ERROR in ./src/main/javascript/app.js
Module build failed: SyntaxError: Unexpected token (66:18)

  64 |     }
  65 | 
> 66 |     addErrorAlert = (title, message) => {
     |                   ^
  67 |         this.state.toastContainer.error(
  68 |             message,
  69 |             title,

The method in question, it is actually part of a EM6 class extending React.Component

addErrorAlert = (title, message) => {
    this.state.toastContainer.error(
        message,
        title,
        {
            timeOut: 10000,
            extendedTimeOut: 10000,
            preventDuplicates: true,
            positionClass: "toast-bottom-full-width",
            showMethod: "fadeIn",
            hideMethod: "fadeOut"
        }
    );
};

WebPack config

var path = require('path');

var node_dir = __dirname + '/node_modules';

module.exports = {
    entry: './src/main/javascript/app.js',
    devtool: 'sourcemaps',
    cache: true,
    debug: true,
    resolve: {
        alias: {
            'stompjs': node_dir + '/stompjs/lib/stomp.js',
        }
    },
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js'
    },
    module: {
        loaders: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

Is the `addErrorAlert` function supposed to return anything or is that an action? — m_callens, Feb 23 '17 at 17:34
It is just an action, but I may want to update the state. I thought the arrow functions were a way to avoid the this.method = this.method.bind(this) as that can get annoying after a while — greyfox, Feb 23 '17 at 17:36

Lucas · Accepted Answer · 2017-02-23T17:38:41.263

3

This feature (class properties) is still an experimental feature and is not include in React and ES2015 presets.

To transpile it with babel, you need to include the relevant transform in the Babel configuration.

UPDATE: Here's how you can enable it: first, install the NPM package babel-plugin-transform-class-properties and change your webpack config to:

query: {
    cacheDirectory: true,
    presets: ['es2015', 'react'],
    plugins: ['transform-class-properties']
}

edited Feb 23 '17 at 17:38

answered Feb 23 '17 at 17:33

Lucas

4,067
1
20
30

It not very useful to through a link at a user and essentially say, "read this". Try to explain it here for OP – m_callens Feb 23 '17 at 17:34
@m_callens I don't think I'm supposed to link the installation steps present in the site, they are very clear already. I answered clearly that this feature is not included in the presets he's using and did not simply say "read this". – Lucas Feb 23 '17 at 17:35
Yes perhaps, but that offers no resolution. – m_callens Feb 23 '17 at 17:36
The question doesn't ask for a resolution. Being picky about the answer when the question is vague also isn't that useful @m_callens – Clive Feb 23 '17 at 17:38
here's also the code which made it work in babel config `{ "presets": ["es2015", "react", "stage-0"] }` Thank you for your reply – Erik Rybalkin Aug 24 '18 at 12:25

score 0 · Answer 2 · answered Feb 23 '17 at 17:37

You need to enable class properties, which is not part of ES6.

presets: ['es2015', 'react'],
plugins: ['transform-class-properties']

Or you can just assign the property in the constructor.

constructor(props, context) {
  super(props, context);
  this.addErrorAlert = () => { }
}

ES6 Arrow Function Compile Error

2 Answers2