Webpack and React — Unexpected token

Question

I am new to React and Webpack. I am setting up my first project, when I try to run the webpack-dev-server my code does not compile!

Update Answer be

Answer 1

You also need to add the react preset into your babel-loader config

And it must come after the es2015

  {
    test: /\.js?$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel', // 'babel-loader' is also a legal name to reference
    query: {
      presets: ['es2015', 'react']
    }
  }

The problem you're experiencing happens because for babel to know how to transpile JSX - it should know its syntax, which it does not out of the box.

As it was mentioned in the comments - you would also have to install the babel-preset-react npm package (which would obvious anyway since the babel would tell it to you on the first run anyway).

References:

• https://babeljs.io/docs/plugins/preset-react/