I’ve just started to learn React. I followed some of tutorials. When I run sample code from all of tutorials above, I was getting SyntaxError: Unexpected token
error like this:
... ERROR in ./app/main.jsx Module build failed: SyntaxError: /home/edward/learn/react-webpack-cookbook/app/main.jsx: Unexpected token (7:17) 5 | 6 | function main() { > 7 | React.render(<Hello />, document.getElementById('app')); | ^ 8 | } 9 | at Parser.pp.raise (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/location.js:24:13) at Parser.pp.unexpected (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/util.js:91:8) at Parser.pp.parseExprAtom (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:507:12) at Parser.pp.parseExprSubscripts (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:260:19) at Parser.pp.parseMaybeUnary (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:240:19) at Parser.pp.parseExprOps (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:171:19) at Parser.pp.parseMaybeConditional (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:153:19) at Parser.pp.parseMaybeAssign (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:120:19) at Parser.pp.parseExprListItem (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:966:16) at Parser.pp.parseCallExpressionArguments (/home/edward/learn/react-webpack-cookbook/node_modules/babylon/lib/parser/expression.js:336:20) @ multi main webpack: bundle is now VALID.
I found some working React project starter kit (here and here). I noticed that they use BabelJS 5 and mine is BabelJS 6. BabelJS released the new major version a few days ago (29-Oct) and made breaking changes.
So, in order to use BabelJS 6 with React and ES6, we need to use babel-preset-react
and babel-preset-es2015
by running:
npm install --save-dev babel-preset-react babel-preset-es2015
And then, create a .babelrc
file in your root project:
{ "presets": ["es2015", "react"] }
In your webpack.config.js
, you need to tweak your *.jsx
loader to use babel-preset-react
:
... { test: /\.jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['react'] } } ...
After that, you can compile your React code without getting syntax error.