Redux Web 扩展 - 未捕获类型错误:尝试传播不可迭代实例无效

Question

我正在开发一个也使用 Redux 开发工具扩展的 React 应用程序。它运行在 Node 上并使用 Webpack 进行编译。我最近将我的应用程序从 2 升级到 Webpack 4。

通过使用 webpack 命令，应用程序可以很好地编译，但是当我尝试在浏览器中运行它时，我收到以下错误，导致应用程序终止：

Uncaught TypeError: Invalid attempt to spread non-iterable instance

错误发生在我正在配置 redux 存储的configureStore.js文件中。请参阅下面的第 7 行import { composeWithDevTools } from 'redux-devtools-extension';导致问题。

配置存储.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)
        )
    );
}

当我删除此扩展程序时，我的初始页面加载。但是，我想将此扩展保留在应用程序中。关于为什么会发生这种情况以及如何保持其工作的任何想法或建议？以下是作为参考点的其他文件。

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

包.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

错误来自

const middleware = routerMiddleware(history);
applyMiddleware(reduxImmutableStoreInvariant(), thunk, ...middleware)

你应该在这样的强括号中声明你的中间件

const middleware = [routerMiddleware(history)];

或者直接声明

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

编辑：这就是我设置我的方式，以获得更好的可读性

const middleware = [reduxImmutableStoreInvariant(), thunk,  routerMiddleware(history)];
const store = createStore(reducers, initialState,
                 composeWithDevTools(applyMiddleware(...middleware)));