0

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

Jeremy
  • 1
  • 85
  • 340
  • 366
Bernhard
  • 4,855
  • 5
  • 39
  • 70

1 Answers1

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.

Matthias Winkelmann
  • 15,870
  • 7
  • 64
  • 76
  • Ok so what I've done using stage-0 beside es-2015 can be transpiled using the preset but isn't valid? More a mix from different standards? – Bernhard Dec 09 '15 at 15:14
  • es2015 is the 'next' standard, with the major browsers supporting about 80% right now. stage-0 (-1, -2, -3) are collections of proposals for the future development. I believe it takes about two years from stage-0 to an agreed-upon standard. So es2015 and stage-0 aren't contradictory. – Matthias Winkelmann Dec 09 '15 at 17:19
  • Thanks for your comment really helped me very much to understand better how babel works. – Bernhard Dec 09 '15 at 22:32