Webpack 2 (beta) fails to handle JSX despite being provided with a Babel loader with React preset

Question

I have used this guide from Webpack docs as a reference to create a Webpack config with HMR, but I get an error stating that I don't have a loader for JSX. I have installed all of the needed packages listed in the reference. Note, I've also tried putting my Babel config in .babelrc in the first place, but it gave me the same results.

ERROR in ./src/index.js
Module parse failed: /Users/macbem/Documents/Coding/Back/typeahead-todo/src/index.js Unexpected token (10:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|   <AppContainer>
|     <App />
|   </AppContainer>,
 @ multi main

My config files are in the root of the project, .js files are in /src/. My webpack config looks as follows:

// webpack.config.js
const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  context: resolve(__dirname, 'src'),
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    contentBase: resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              "presets": [
                  [ "es2015", { "modules": false } ],
                  "stage-2",
                  "react"
                ],
              "plugins": [
                "react-hot-loader/babel"
              ]
            }
          },
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader?modules',
          'postcss-loader',
        ],
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
};

Also, this is my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader';
// AppContainer is a necessary wrapper component for HMR

import App from './components/App';

ReactDOM.render(
  <AppContainer>
    <App />
  </AppContainer>,
  document.getElementById('root')
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NewApp = require('./components/App').default
    render(NewApp)
  });
}

Answer 1

Edit: all I said before was wrong, ignore it, lots of stuff changed in webpack 2 and what I said doesn't apply anymore.

Went ahead and tried it out for myself and I think I found the issue: the version of webpack in the link (beta.20) doesn't actually support the "module.rules.use" syntax. I'm not exactly sure which version of the beta started supporting it, but beta.25 seems to work.

So if you do a npm uninstall webpack --save and npm install [email protected] --save, it should (hopefully) all work.