React: Syntax Error – Unexpected Token <

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.

8 thoughts on “React: Syntax Error – Unexpected Token <

  1. Thanks for putting this together. This one got me just now too and it’s my first time using Webpack and I could not for the life of me figure out what I was doing wrong. Appreciate it.


  2. Webpack won’t process .jsx files even with the regex above unless you specify this extension explicitly in the resolve block of webpack.config.js

    resolve: {
        extensions: ['.js', '.jsx']

    Sometimes this block is omitted and webpack searches only for .js or .json files by default.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s