web-dev-qa-db-ja.com

Redux Web Extension-Uncaught TypeError：反復不可能なインスタンスを拡散しようとする無効な試み

私はReact Redux devツール拡張機能も使用するアプリケーションに取り組んでいます。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"
  }
}
javascriptreactjswebpackreduxredux-devtools
5
Nigel Finley

エラーは、

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