Fail to set up project with webpack, babel - reactjs

Question

I am making a sample app using react, bower and webpack.
I have this index.jsx file:
import React from 'react';
import {ReactDOM} from 'react-dom';
import AwesomeComponent from './AwesomeComponent.jsx';
var App = React.createClass({
render: function() {
return (<p> Hello React!</p>);
}
});
ReactDOM.render(<App/>, document.getElementById('app'));
I installed the following:
npm i babel-loader babel-preset-es2015 babel-preset-react -S
My webpack.config.js is:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
loaders : [
{
test : /\.jsx?/,
loader: 'babel',
include : APP_DIR,
query: {
presets: ['react', 'es2015']
}
}
]
};
module.exports = config;
My issues is that in the index.jsx file I am getting:
ERROR in ./src/client/app/index.jsx
Module parse failed: /path/to/file/src/client/app/index.jsx Unexpected token (7:12)
You may need an appropriate loader to handle this file type.
However, I've installed the bower packages and made bower the default loader.
Why does this still come up then?

Answer 1

You need to put your loaders config under a "module" key.
...
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.jsx?/,
loader: 'babel',
include : APP_DIR,
query: {
presets: ['react', 'es2015']
}
}]
}
...