Webpack throws error about jsx component - reactjs

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']
}
}]
}