Redux Web Extension - Uncaught TypeError: Invalid attempt to spread non-iterable instance

Question

I am working on a React application that also uses the Redux dev tools extension. It is running on Node and used Webpack to compile. I recently upgraded my application to Webpack 4 from 2.

The application compiles fine through the use of the webpack command but when I try and run it in the browser I get the following error which kills the app:

Uncaught TypeError: Invalid attempt to spread non-iterable instance

The error is happening in my configureStore.js file where I am configuring the redux store. See below line 7 import { composeWithDevTools } from 'redux-devtools-extension'; is causing the issue.

configureStore.js

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './rootReducers';
import reduxImmutableStoreInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';
import {routerMiddleware} from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import { composeWithDevTools } from 'redux-devtools-extension';

const history = createHistory();
const middleware = routerMiddleware(history);

export default function configureStore(){
    return createStore(
        rootReducer,
        composeWithDevTools(
            applyMiddleware(reduxImmutableStoreInvariant(), thunk, ...middleware)
        )
    );
}

When I remove this extension my initial page loads. However, I want to keep this extension in the app. Any ideas or suggestions as to why this might be happening and how to keep this working? Below are additional files as reference points.

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');


module.exports = {
    mode: 'development',
    entry: [
        './src/index.js',
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public'),
        publicPath: '/'
    },
    devtool: 'eval-source-map',
    cache: true,
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env', '@babel/preset-react'],
                    plugins: [require('@babel/plugin-proposal-class-properties')]
                  }
                }
              },
            {
                test: /\.(jpg|png|svg)$/,
                loader: 'url-loader',
                options: {
                    limit: 25000
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                test: /\.(eot|ttf|woff|woff2)$/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]'
                }
            }
        ],
    },
    resolve: {
        extensions: ['.webpack.js', '.web.js', '.js', '.jsx']
    },
    node: {
        console: true,
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
    ]
};

.babelrc

{
  "presets": [
    ["@babel/env", {
      "targets": {
        "node": "current"
      }
    }, "@babel/preset-react"]
  ]
}

package.json

 {
  "name": "react-app",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "compile": "webpack",
    "start": "nodemon server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js --content-base public --inline --hot",
    "build": "webpack --config webpack.prod.js -p",
    "lint": "eslint ."
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.55",
    "@material-ui/core": "^1.4.0",
    "@material-ui/icons": "^1.1.0",
    "autosuggest-highlight": "^3.1.1",
    "axios": "^0.15.3",
    "babel-loader": "^8.0.0-beta",
    "body-parser": "^1.15.2",
    "connect-redis": "^3.2.0",
    "cookie-parser": "^1.4.3",
    "express": "^4.16.2",
    "express-session": "^1.15.0",
    "file-loader": "^0.9.0",
    "history": "^4.7.2",
    "html-webpack-plugin": "^3.2.0",
    "lodash": "^4.17.10",
    "moment": "^2.17.1",
    "npm": "^3.10.8",
    "querystring": "^0.2.0",
    "react": "^16.0.0",
    "react-autosuggest": "^9.3.4",
    "react-bootstrap": "^0.31.0",
    "react-bootstrap-date-picker": "^5.1.0",
    "react-datetime": "^2.8.6",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.3.1",
    "react-router-form": "^1.0.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "redis": "^2.6.5",
    "redux": "^4.0.0",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-thunk": "^2.2.0",
    "request": "^2.79.0",
    "spotify-web-api-js": "^0.23.0",
    "spotify-web-api-node": "^2.5.0",
    "url-loader": "^0.5.7"
  },
  "engines": {
    "node": ">=8.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-beta.55",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.55",
    "@babel/preset-env": "^7.0.0-beta.55",
    "@babel/preset-react": "^7.0.0-beta.55",
    "eslint": "^5.1.0",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "6.10.3",
    "json-loader": "^0.5.7",
    "morgan": "^1.9.0",
    "react-hot-loader": "^1.3.1",
    "redux-devtools-extension": "^2.13.5",
    "webpack": "^4.16.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-node-externals": "^1.6.0"
  }
}

Answer 1

The error is from the spreading in

const middleware = routerMiddleware(history);

applyMiddleware(reduxImmutableStoreInvariant(), thunk, ...middleware)

You should declare your middleware inside a strong brackets like this

const middleware = [routerMiddleware(history)];

Or alternatively declare it directly

applyMiddleware(reduxImmutableStoreInvariant(), thunk, ...[middleware] ) 

EDIT : This is how i set up mine, for better readability

const middleware = [reduxImmutableStoreInvariant(), thunk,  routerMiddleware(history)];

const store = createStore(reducers, initialState,
                 composeWithDevTools(applyMiddleware(...middleware)));