babelify 6 with browserify and the es2015 preset is not working

Julien Vincent picture Julien Vincent · Nov 10, 2015 · Viewed 12.5k times · Source

I am attempting to use the new babel release, and while trying to use the es2015 preset babel doesn't seem to be able to understand arrow functions?

My setup on pre-babel6 was as follows:

transform: [['babelify', {sourceMap: false, stage: 0, optional: 'runtime', ignore: ["*.min.js"]}]]

and with babel6

transform: [['babelify', {"presets": ["es2015"]}]]

which does not work. Why is this?

edit

adding "stage-0" got rid of the syntax error messages, but has stoped me from being able to extend anything with the error: 'this' is not allowed before super() when I have infact got a super() call.

edit

Set up a simple test application with some es7 and tried to use the babel-core require hook, same problem.

edit

Ok so I have narrowed it down to stage-0 working differently in babeljs 6^.

Here is what I have noticed:

Run file

require("babel-core/register")(
    {
        presets: ["es2015", "stage-0"]
    }
);

require("./app.js");

Works with:

class extendable {
    constructor() {
        console.log('extended')
    }
}

class app extends extendable {

    constructor() {

        super();

        this.method();
        this.method2();
    }

    method() {
        // arrow functions
        setTimeout(() => {
            console.log("works")
        }, 1000)
    }

    /**
     * arrow function method
     */
    method2 = () => {
        console.log('works')
    }
}
new app();

Doesn't work with:

class extendable {
    constructor() {
        console.log('extended')
    }
}

class app extends extendable {

    constructor() {

        super();

        this.method();
        this.method2();
    }

    method() {
        // arrow functions
        setTimeout(() => {
            console.log("works")
        }, 1000)
    }

    /**
     * arrow function method
     */
    method2 = () => {
        // give an error: 'this' is not allowed before super()
        this.state = "hello";
    }
}
new app();

So I am a little confused. Is this really incorrect syntax? How have I been able to use this pre-babel6?

Answer

Julien Vincent picture Julien Vincent · Nov 11, 2015

This is a Babeljs bug

See

Hopefully this will see a fast fix.

edit #2942 is not referencing the same bug. Here is an issue following this bug: #3028