Issue running react-redux with webpack - reactjs

Question

Hi I was going through this tutorial and I have setup my webpack configuration based on this tutorial.
Regardless I have the following file index.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import AppComp from './components/App'
let store = createStore(todoApp)
let App = React.createClass({
render: () => {
return (
<Provider store={store}>
<AppComp />
</Provider>
)
}
});
render(
<App/>,
document.getElementById('app')
)
And my webpack configuration is
var HtmlWebpackPlugin = require ('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: 'index_build.js'
},
module: {
loaders: [
{
test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', presets: ['es2015', 'react']
},
]
},
plugins: [HtmlWebpackPluginConfig]
};
When I run the app with webpack, I got the following error
ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (13:6)
11 | render: () => {
12 | return (
> 13 | <Provider store={store}>
| ^
14 | <App />
15 | </Provider>
16 | )
Anyone can help me with resolving this error?
Edit: The issue was the way I defined my webpack configs, the presets should be inside query block. Here is my updated webpack config file
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'babel-preset-react']
}
}
]
},
plugins: [HTMLWebpackPluginConfig]
};

Answer 1

You must specify babel presets. You can use .babelrc
{
"presets": [
"react",
"es2015"
]
}
or you can specify it in your loader query:
loaders: [ 'babel?presets[]=react,presets[]=es2015' ]

Answer 2

You need to use npm module 'path' for defining path. Here is the webpack.config.js file
var HtmlWebpackPlugin = require ('html-webpack-plugin');
var path = require('path');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: path.resolve(__dirname, 'dist/'),
filename: 'index_build.js'
},
module: {
loaders: [
{
test: /\.js$/, include: path.join(__dirname,'/app'), loader: 'babel-loader', presets: ['es2015', 'react']
},
]
},
plugins: [HtmlWebpackPluginConfig]
};