Redux-Erweiterung - Uncaught TypeError: Ungültiger Versuch zur Ausbreitung nicht-wiederholenden Instanz
Arbeite ich an einer Anwendung Reagieren, die auch verwendet die Redux-dev-tools-Erweiterung. Es läuft auf Knoten und verwendet Webpack zu kompilieren. Ich habe vor kurzem aktualisiert mein Antrag auf Webpack 4 aus 2.
Die Anwendung kompiliert fein durch die Nutzung der webpack
Befehl, aber wenn ich versuche, und führen Sie es im browser bekomme ich folgende Fehlermeldung, die tötet die app:
Uncaught TypeError: Invalid attempt to spread non-iterable instance
Ist der Fehler passiert in meinem configureStore.js
Datei, wo ich die Konfiguration der redux-Shop. Sehen Sie unten die Linie 7 import { composeWithDevTools } from 'redux-devtools-extension';
das Problem verursacht.
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)
)
);
}
Wenn ich entfernen Sie diese Erweiterung meiner ersten Seite geladen. Aber ich will, dass diese Erweiterung in der app. Irgendwelche Ideen oder Vorschläge, warum dies geschehen könnte und wie dies funktioniert? Unten sind weitere Dateien, die als Bezugspunkte.
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"]
]
}
Paket.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"
}
}
- Versuchen Sie, middleware, mit diesem:
const middleware=[routerMiddleware(history)];
- Das hat geklappt danke dir!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Der Fehler ist bei der Verbreitung in
Sollten Sie erklären, Ihre middleware innerhalb einer starken Klammern, wie dies
Hilfsweise erklären Sie es direkt
EDIT : ist Dies, wie ich meine, für eine bessere Lesbarkeit