Muhammad Raihan Muhaimin Muhammad Raihan Muhaimin - 3 months ago 13
React JSX Question

Issue running react-redux with webpack

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 presents should be inside query. 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

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