2

I'm trying to implement pages transitions animation by react-router. After I've compiled my code with browserify/babel I get 'unexpected token' on this line: static contextTypes = { with the arrow pointing under the = sign.

I've copied/pasted the code exactly from the docs, I don't understand what's wrong.

2 Answers 2

1

The static keyword is a proposed es7 feature, you need to add babel's stage-0 preset: https://github.com/babel/babel/tree/master/packages/babel-preset-stage-0

Alternatively you can just do the business after your class:

class RouteCSSTransitionGroup extends React.Component { ... } RouteCSSTransitionGroup.contextTypes = { location: React.PropTypes.object } 
Sign up to request clarification or add additional context in comments.

5 Comments

thanks man, I've tried both your solutions but now I have another Unexpected token on <ReactCSSTransitionGroup {...props}>, this time the arrow points on the open tag < of ReactCSSTransitionGroup
@LucaMormile sounds like your jsx transformation is not working - you need the es2015 and react preset also babeljs.io/docs/plugins
Also just my opinion but webpack is much better than browserify (and about 15x faster at incrementally compiling)
I'll surely see for webpack, if you let me I'd like to show my CLI script to compile: browserify main.jsx -o public/js/bundle.js -t [ babelify --presets stage-0 [ es2015 react ] ]
Looks ok but I'm not a browserify expert, stage 0 should go inside the square brackets i.e. --presets [ stage-0 es2015 react ]. Also I assume you installed the other presets i.e. npm i babel-preset-react babel-preset-react. There was an issue when I last tried getting stage-0 to work with those other presets though, but the react and es2015 ones should work fine together
1

npm install --save-dev babel-loader

npm install --save-dev babel-core babel-preset-es2015 babel-preset-react

npm install --save-dev babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3

and:

 query:{ presets:['es2015','react','stage-0','stage-1','stage-2','stage-3'] } 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.