Webpack throws error about jsx component

Question

I have the following jsx component:

import React, { Component } from 'react';

class App extends Component {
    render () {
        return (
            <div className="app">
                <h2>Welcome to React</h2>
            </div>
        )
    }
}

export default App;

and my webpack file:

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    context: path.resolve(__dirname, './src'),
    entry: {
        app: './index.jsx'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, './dist/assets'),
        publicPath: '/assets',

    },
    devServer: {
        contentBase: path.resolve(__dirname, './src')
    },
    module: {
        rules: [
            {
              test: /\.jsx$/,
              exclude: [/node-modules/],
              use: [
                {
                  loader: "babel-loader",
                  options: { presets: ["es2015"] }
                }
              ]
            },
            {
                test: /\.css$/,
                use:  ExtractTextPlugin.extract({
                    use: [{
                        loader: 'css-loader',
                        options: { importLoaders: 1 },
                    }],
                }),
            },
            {
              test: /\.(sass|scss)$/,
              use: ["style-loader", "css-loader", "sass-loader"]
            }
        ]
    },
    resolve: {
        modules: [ 
            path.resolve(__dirname, './src'),
            'node_modules'
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common'
        }),
        new ExtractTextPlugin({
            filename: '[name].bundle.css',
            allChunks: true
        })
    ]
}

however when I run:

 node_modules/.bin/webpack -d

I get the following error:

Answer 1

Add "babel-preset-react"

npm install babel-preset-react

and add "presets" option to babel-loader in your webpack.config.js

Here is an example webpack.config.js:

  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  }