Babel 6 preset selection to get babel working

Question

I'm using babel 6 with the react plugin and followed the documentation instructions for setting up the transpile process. I've read to get react working I need to use es2015 and react preset. Initially everything worked fine using this both presets.

But when I've copied an example code from babel's website (Property initializers) to test new language features I've got errors when code below was transpiled and so it wasn't possible anymore to transpile the code.

// The ES6+ way
class Video extends React.Component {
    static defaultProps^= { // this is line 42 and ^ the column where error occurs
        autoPlay: false,
        maxLoops: 10,
    }

    static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    }

    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

Warning: [...]components/sectorList.js: Unexpected token (42:24) Use --force to continue.

After a long while debuggin I've got this issue solved by loading also the stage-0 preset for babel. But it was just luck.

So my question where I can't find an answer for is:

How is the correct way to determine the correct preset collection.

Or is an unexpected token ... warning mostly a notification for an missing preset?

Thanks for any help

Answer 1

If you look at the babel pages for a preset, it lists all the included transformations. In this case, you're using class properties, which is currently at stage 1 and is therefore included in the stage 1 preset.

In ES2015, you'd use the constructor to set the defaults.