web-dev-qa-db-fra.com

Extension Web Redux - TypeError non intercepté: tentative non valide de propagation d'une instance non itérable

Je travaille sur une application React qui utilise également l'extension des outils de développement Redux. Elle fonctionne sur Node et a utilisé Webpack pour compiler. J'ai récemment mis à niveau mon application au Webpack 4 de 2.

L'application se compile très bien grâce à l'utilisation de la commande webpack mais lorsque j'essaie de l'exécuter dans le navigateur, j'obtiens l'erreur suivante qui tue l'application:

Uncaught TypeError: Invalid attempt to spread non-iterable instance

L'erreur se produit dans mon configureStore.js fichier où je configure le magasin redux. Voir ci-dessous ligne 7 import { composeWithDevTools } from 'redux-devtools-extension'; est à l'origine du problème.

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

Lorsque je supprime cette extension, ma page initiale se charge. Cependant, je souhaite conserver cette extension dans l'application. Avez-vous des idées ou des suggestions pour expliquer pourquoi cela pourrait se produire et comment continuer à fonctionner? Vous trouverez ci-dessous des fichiers supplémentaires comme points de référence.

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"
  }
}
javascriptreactjswebpackreduxredux-devtools
5
Nigel Finley

L'erreur vient de la diffusion

const middleware = routerMiddleware(history);

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

Vous devez déclarer votre middleware entre crochets solides comme celui-ci

const middleware = [routerMiddleware(history)];

Ou bien le déclarer directement

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

EDIT: voici comment j'ai configuré le mien, pour une meilleure lisibilité

const middleware = [reduxImmutableStoreInvariant(), thunk,  routerMiddleware(history)];

const store = createStore(reducers, initialState,
                 composeWithDevTools(applyMiddleware(...middleware)));
4
keysl