Trying to integrate redux into react application. Webpack is choking on store.js

Question

I'm trying to integrate redux into an existing react application. All of my react code is within jsx files. Now i'm introducing redux and a store.js. during the compilation webpack errors on an exepected token error on store.js

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'project/static/public/js');
var APP_DIR = path.resolve(__dirname, 'project/static/public/js/components');


module.exports = {
  entry: APP_DIR + '/App.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  resolve: {
    alias: {
      'react': path.join(__dirname, 'node_modules', 'react')
    }
  },
  module : {
    loaders : [
      {
        test : /\.jsx/,
        include : APP_DIR,
        loader : 'babel',
        presets : ['es2015']
      },
      {
        test : /\.js/,
        include : BUILD_DIR,
        exclude : /bundle.js||bundle.js.map||node_modules/,
        loader : 'babel',
        presets : ['es2015']
      }
    ]
  },
  watchOptions: {
    poll: true
  }

};

.babelrc

{
  "presets": [
    "es2015",
    "react"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  },
  "plugins": [
      ["transform-es2015-arrow-functions", { "spec": true }],
      ["transform-class-properties"]
    ]
}

store.js

import { applyMiddleware, createStore} from 'redux';
import combineReducers from './reducers/index.js'


export default createStore(combineReducers)

error message

ERROR in ./project/static/public/js/store.js Module parse failed: /home/username/git/project/project/static/public/js/store.js Line 1:

Unexpected token You may need an appropriate loader to handle this file type. | import { applyMiddleware, createStore} from 'redux'; | import combineReducers from './reducers/index.js' | @ ./project/static/public/js/components/App.jsx 15:13-32

These files have gone through multiple iterations in trying to resolve and better understand redux. I think the problem is with my webpack configuration.

For .js files, you're only including BUILD_DIR. Where is store.js located? I'm guessing it's under APP_DIR and since it's not included in the config for babel-loader, Webpack doesn't know what loader to use. — Joe Attardi
store.js is in the root of BUILD_DIR. project/static/public/js/store.js — DigitalDisaster

Charly Charly · Accepted Answer · 2018-11-28T13:39:22

Which version of Babel are you using? I guess that you need to use the babel-loader in the webpack rule. This configuration works fines with Babel 7 and Webpack 4.

WEBPACK RULE:

      {
        test: /\.js$/,
        include : BUILD_DIR,
        exclude : /bundle.js||bundle.js.map||node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },

And .babelrc file example:

{
  "presets": [[
    "@babel/preset-env", {
      "useBuiltIns": "entry"
    }],
    "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    "react-hot-loader/babel"
  ]
}

Please, keep in mind you need to install babel-loader at least version 8.0.0, babel core 7.0.0 and webpack 4.23.

But, I'm pretty sure that the problem is that you need to use the babel-loader plugin in webpack. Visit https://github.com/babel/babel-loader

Best!

Trying to integrate redux into react application. Webpack is choking on store.js

1 Answers