Redux Web 扩展 - 未捕获的 TypeError：传播不可迭代实例的无效尝试

Posted 2023-02-19

【中文标题】Redux Web 扩展 - 未捕获的 TypeError：传播不可迭代实例的无效尝试

【英文标题】：Redux Web Extension - Uncaught TypeError: Invalid attempt to spread non-iterable instance

【发布时间】：2019-01-15 08:54:22

【问题描述】：

我正在开发一个也使用 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'; 导致问题。

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)
        )
    );

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

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"
  

【问题讨论】：

尝试更改中间件：const middleware=[routerMiddleware(history)];

成功了，谢谢！

【参考方案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)));