babelify 6 with browserify and the es2015 preset is not working

Question

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 1

This is a Babeljs bug

See

• Subclasses with class properties (without constructor) error #2942
• [Regression BUG] Class scoped function showing SyntaxError: 'this' is not allowed before super() #2971

Hopefully this will see a fast fix.

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

Answer 2

It depends a bit on how you are executing browserify, this is what the Github repository from babelify (https://github.com/babel/babelify) says about it :

From the CLI:

$ browserify script.js -o bundle.js \
-t [ babelify --presets [ es2015 react ] ]

With Node:

browserify("./script.js")
  .transform("babelify", {presets: ["es2015", "react"]})
  .bundle()
  .pipe(fs.createWriteStream("bundle.js"));