Ryan Weiss Ryan Weiss - 1 year ago 124
React JSX Question

Webpack won't parse JSX no matter what I try

Been at it a couple days...

Trying to use Webpack to do lazy-loading of React modules, app-shell rendered first on the server, then Router injected on the client. It was compiling fine when using gulp, but with Webpack, I get the infamous:

ERROR in ../server/components/routes/AppRouter.jsx
Module parse failed: /web/sites/react-lazy/server/components/routes/AppRouter.jsx Unexpected token (11:6)
You may need an appropriate loader to handle this file type.


import React from 'react';
import { Router, Route, IndexRoute } from 'react-router';
import routes from './AppRoute.jsx';
import createMemoryHistory from 'history/lib/createMemoryHistory';

if (typeof require.ensure !== 'function') require.ensure = (d, c) => c(require)

export default class AppRouter extends React.Component {
render() {
return (
<Router routes={routes} history={createMemoryHistory()} /> // < -- errors here

My webpack.config.js:

var path = require('path')

module.exports = {
context: __dirname + "/src",
entry: './js/app.es6.js',
resolve: {
extensions: ['', '.js', '.jsx']
module: {
loaders: [
test: /\.jsx?$/,
loader: 'babel-loader',
include: path.resolve(__dirname, 'src/js'),
exclude: /(node_modules)/,
query: {
presets: ["es2015", "stage-0", "react"],

output: {
path: __dirname + '/build',
publicPath: '/build',
filename: 'app.js',
chunkFilename: '[id].chunk.js',

My directory structure:

.babelrc // <-- also put a .babelrc here in case

My package.json:

"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.14.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"babel-register": "^6.14.0",
"webpack": "^1.13.2",

I've tried:

  • duplicating the .babelrc file into the main directory and entry point directory, not sure which is necessary.

  • registering
    babel-register: in app.es6.js:

    presets: [ 'es2015', 'stage-0', 'react' ]

  • runnning webpack with '--config webpack.config.js' argument

  • If I downgrade the babel, babel-core, and babel-loader version to 5.* (from 6.*), there is a different error:

    ERROR in ./js/app.es6.js
    Module build failed: ReferenceError: [BABEL] /web/sites/react-lazy/src/js/app.es6.js: Unknown option: direct.presets

I'm fairly new to React and webpack, I should say. Anyone know any other tricks?


  • webpack config's 'include' property must include all directories you need to pass through loaders

Answer Source

Your entry file uses components that are located here:


However, your include configuration only allows files below /web/sites/react-lazy/src/js/ to be passed to the loader (include means: "any files that should be passed to this loader must be located in this directory").

So either remove the include configuration, or make it an array that also includes the other locations where .jsx files can be found.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download