Issue running react-redux with webpack

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

That error message indicates babel-preset-react not found... I'll suggest you include a .babelrc file in your root directory with { "presets": ["babel-preset-es2015", "babel-preset-react"] } — Ademola Adegbuyi
– Ademola Adegbuyi, Commented Aug 29, 2016 at 12:36

Md.Estiak Ahmmed · Accepted Answer · 2016-08-29 14:25:08Z

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

answered Aug 29, 2016 at 14:25

Md.Estiak Ahmmed

1,5939 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rafi Ud Daula Refat · Accepted Answer · 2016-08-29 13:54:44Z

0

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

edited Aug 29, 2016 at 13:54

answered Aug 29, 2016 at 13:24

Rafi Ud Daula Refat

2,25520 silver badges28 bronze badges

5 Comments

Muhammad Raihan Muhaimin Over a year ago

That is not correct. You can see in my config file I am using concatenation instead of path. path: path.join(__dirname,'/dist') would be equivalent to path: __dirname + '/dist'

Rafi Ud Daula Refat Over a year ago

string concatenation will not work in windows as __dirname have restrictions there. you can check running that in windows. i have faced similar problem before. let me have a look again. i can see there are many string concatenations in the webpack.config.js file. you chould change.

Muhammad Raihan Muhaimin Over a year ago

I don't use windows.

Rafi Ud Daula Refat Over a year ago

here is webpack.config.js file. you can have a look that is working for react-redux. github.com/OnlyRefat/react-redux-webpack/blob/master/…

Muhammad Raihan Muhaimin Over a year ago

As I said it was not due to path. May be you only need to use path when you are in windows.

Collectives™ on Stack Overflow

Issue running react-redux with webpack

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related