title: Why isn't babel-preset-react parsing my JSX?
body: <p>I get the following error when running <code>webpack</code>:</p>
  
  <pre><code>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.
  </code></pre>
  
  <p>I believe I have all the correct loaders set up, please tell me if I missed something.</p>
  
  <p>package.json:</p>
  
  <pre><code>"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"
    }
  </code></pre>
  
  <p>webpack.config.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>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&amp;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()
    ]
  };
  </code></pre>
  
  <p>src/index.jsx:
  </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './components/App';
  
  const main = () =&gt; {
    const app = document.createElement('div');
  
    document.body.appendChild(app);
  
    ReactDOM.render(&lt;App /&gt;, app);
  };
  
  main();
  </code></pre>
  
  <p>I have also tried without any presets using a .babelrc file:</p>
  
  <pre><code>{
    "presets": ["es2015", "stage-0", "react"]
  }
  </code></pre>
  
  <p>Running <code>babel src/index.jsx</code> does work as expected, so I think this is an issue with the webpack configuration.</p>