javascript Redux Web 扩展 - 未捕获的类型错误：传播不可迭代实例的尝试无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51740795/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Redux Web Extension - Uncaught TypeError: Invalid attempt to spread non-iterable instance
提问by Nigel Finley
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.
我正在开发一个也使用 Redux 开发工具扩展的 React 应用程序。它在 Node 上运行并使用 Webpack 进行编译。我最近将我的应用程序从 2 升级到了 Webpack 4。
The application compiles fine through the use of the webpackcommand but when I try and run it in the browser I get the following error which kills the app:
该应用程序通过使用该webpack命令编译得很好，但是当我尝试在浏览器中运行它时，我收到以下错误，该错误会杀死该应用程序：
Uncaught TypeError: Invalid attempt to spread non-iterable instance
The error is happening in my configureStore.jsfile where I am configuring the redux store. See below line 7 import { composeWithDevTools } from 'redux-devtools-extension';is causing the issue.
错误发生在我configureStore.js配置 redux 存储的文件中。请参阅下面的第 7 行import { composeWithDevTools } from 'redux-devtools-extension';导致问题。
configureStore.js
配置Store.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
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
.babelrc
{
"presets": [
["@babel/env", {
"targets": {
"node": "current"
}
}, "@babel/preset-react"]
]
}
package.json
包.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"
}
}
采纳答案by keysl
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)));
