CODEWITHSUNDEEP
reactjsreduxreact-redux
Muhammad Raihan Muhaimin
Muhammad Raihan Muhaimin

Reputation: 5729

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

Upvotes: 1

Views: 720

Answers (2)

Md.Estiak Ahmmed
Md.Estiak Ahmmed

Reputation: 1593

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

Upvotes: 1

Rafi Ud Daula Refat
Rafi Ud Daula Refat

Reputation: 2257

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

Upvotes: 0

Related Questions