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!
InformationsquelleAutor Nigel Finley | 2018-08-08
Schreibe einen Kommentar