Webpack won't parse JSX no matter what I try - reactjs

Question

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.
AppRouter.jsx:
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:
/
webpack.config.js
.babelrc
/src
/js
app.es6.js
.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:
require('babel-register')({
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?
Solution:
webpack config's 'include' property must include all directories you need to pass through loaders

Answer 1

Your entry file uses components that are located here:
/web/sites/react-lazy/server/components/
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.