Webpack, React, JSX, Babel - Unexpected token <

Question

This is what I have, using ExpressJS:

|-- app
|   |-- index.js
|-- node_modules
|   |-- babel-core
|   |-- babel-loader
|   |-- babel-preset-react
|   |-- express
|   |-- react
|   |-- react-dom
|   |-- webpack
|-- public
|   |-- js
|   |   |-- app.js
|   |-- index.html
|-- .babelrc
|-- index.js
|-- package.json
|-- webpack.config.js

/webpack.config.js

module.exports = {
    entry: [
        './app/index.js'
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            include: __dirname + '/app',
            loader: "babel-loader",
            query: {
                presets:['react']
            }
        }]
    },
    output: {
        filename: "app.js",
        path: __dirname + '/public/js'
    }
};

/app/index.js

var React = require("react");
var ReactDOM = require("react-dom");
var People = React.createClass({
    ...
});
ReactDOM.render(<People />, document.getElementById('app'));

/.babelrc

{
  "presets": [
    "react"
  ]
}

When I run webpack I get:

Module parse failed: /app/index.js Unexpected token < You may need an appropriate loader to handle this file type.

When I replace <People /> with React.createElement(People, {}) it works just fine.

I have the babel-preset-react module. I have presets:['react'] with the babel-loader loader. I have the .babelrc file.

Why can webpack/babel not parse the <People /> JSX..?

Try adding test: /\.(js|jsx)$/ as your test. Perhaps it's not parsing JSX extensions. — lux
@Andy babel-core: 6.7.4, babel-loader: 6.2.4, babel-preset-react: 6.5.0, react: 0.14.7, react-dom: 0.14.7 — Stephen Last
@lux Just tried that, no luck, same message. I don't have any files with the extension .jsx, only .js. — Stephen Last
What if you change loader: "babel-loader" to simply loader: "babel"? That's how my webpack config reads. — Andy

Stephen Last Stephen Last · Accepted Answer · 2016-03-24T09:26:14

This turned out to be an issue with my include path. I had:

include: __dirname + '/app'

I'm now using path:

include: path.join(__dirname, '/app')

Which works! I'm on Windows, don't know if that makes a difference. Think I'll start using path routinely from now on.

Would've been nice for the webpack error to be something like Can't find include folder/files.

Webpack, React, JSX, Babel - Unexpected token <

1 Answers