Why isn't babel-preset-react parsing my JSX? - reactjs

Question

I get the following error when running webpack:
Error in ./src/index.jsx
Module parse failed: .../src/index.jsx Unexpected token (10:18)
You may need an appropriate loader to handle this file type.
I believe I have all the correct loaders set up, please tell me if I missed something.
package.json:
"dependencies": {
"isomorphic-fetch": "^2.2.1",
"koa": "^1.2.4",
"koa-ejs": "^3.0.0",
"koa-route": "^2.4.2",
"koa-router": "^5.4.0",
"koa-static": "^2.0.0",
"koa-webpack-dev-middleware": "^1.2.2",
"node-sass": "^3.10.1",
"react": "^15.3.2",
"react-dom": "^15.3.2",
"react-hot-loader": "^1.3.0",
"react-redux": "^4.4.5",
"react-router": "^2.8.1",
"redux": "^3.6.0",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"webpack": "^1.13.2"
},
"devDependencies": {
"babel-core": "^6.17.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^6.2.6",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"babel-preset-react-hmre": "^1.1.1",
"css-loader": "^0.25.0",
"eslint": "^3.7.1",
"eslint-loader": "^1.5.0",
"eslint-plugin-react": "^6.4.1",
"koa-webpack-hot-middleware": "^1.0.3",
"react-hot-loader": "^1.3.0",
"redux-devtools": "^3.3.1",
"webpack-dev-server": "^1.16.2"
}
webpack.config.js:
const webpack = require('webpack');
const path = require('path');
const ROOT_PATH = path.resolve(__dirname);
module.exports = {
devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map',
entry: [
'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
path.resolve(ROOT_PATH, 'src/index.jsx')
],
module: {
preLoaders: [{
test: /\.jsx?$/,
loaders: process.env.NODE_ENV === 'production' ? [] : ['eslint'],
include: path.resolve(ROOT_PATH, 'src/index.jsx')
}],
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react'],
cacheDirectory: true,
env: {
development: {
presets: ['react-hmre']
}
}
},
include: './src'
},
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
output: {
path: process.env.NODE_ENV === 'production'
? path.resolve(ROOT_PATH, 'dist')
: path.resolve(ROOT_PATH, 'build'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.resolve(ROOT_PATH, 'build'),
historyApiFallback: true,
hot: true,
inline: true,
progress: true
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
src/index.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
const main = () => {
const app = document.createElement('div');
document.body.appendChild(app);
ReactDOM.render(<App />, app);
};
main();
I have also tried without any presets using a .babelrc file:
{
"presets": ["es2015", "stage-0", "react"]
}
Running babel src/index.jsx does work as expected, so I think this is an issue with the webpack configuration.

Answer 1

My include path for the js(x) loader was wrong. Fixed using
include: path.resolve(ROOT_PATH, './src')
instead of
include: './src'