[Redux] Adding multiple middleware conflict

[evayde]

It seems like it is a problem with pwa-helpers, but I am going to fill the issue here, because maybe I am just misunderstanding the configuration.

Reproduce:

clone the pwa-starter kit
npm i
npm i --save redux-logger

open src/store.js,
add lines:

import logger from 'redux-logger'
const middleware = [logger, thunk]

change line:
compose(lazyReducerEnhancer(combineReducers), applyMiddleware(logger))
into
compose(lazyReducerEnhancer(combineReducers), applyMiddleware(...middleware))

and then npm start.

Error message:

Uncaught TypeError: middleware is not a function
    at applyMiddleware.js:59
    at Array.map (<anonymous>)
    at applyMiddleware.js:58
    at lazy-reducer-enhancer.js:43
    at <anonymous>:1:28482
    at createStore (createStore.js:64)
    at store.js:32
    at f ((index):112)
    at (index):112
    at h ((index):112)

Environment:

  "dependencies": {
    "@polymer/app-layout": "^3.0.0-pre.21",
    "@polymer/lit-element": "^0.5.2",
    "@webcomponents/webcomponentsjs": "^2.0.0",
    "pwa-helpers": "^0.8.2",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "reselect": "^3.0.1"
  },
  "devDependencies": {
    "axe-core": "^3.0.0",
    "chai": "^4.1.2",
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-rename": "^1.3.0",
    "gulp-replace": "^1.0.0",
    "mocha": "^5.2.0",
    "pixelmatch": "^4.0.2",
    "polymer-cli": "^1.7.6",
    "polyserve": "^0.27.0",
    "prpl-server": "^1.2.0",
    "puppeteer": "^1.5.0",
    "wct-browser-legacy": "^1.0.1"
  }

on an Ubuntu 18.04 LTS.
node version: 10.6.0
npm version: 6.1.0

Am I doing it wrong? If so, please add another example to the documentation on how to add multiple Middlewares, too.

[keanulee]

Not super familiar with adding multiple middleware, but do any of these work?

compose(lazyReducerEnhancer(combineReducers),
  applyMiddleware(logger, thunk))

compose(lazyReducerEnhancer(combineReducers),
  applyMiddleware(logger),
  applyMiddleware(thunk))

We are also working to update to Redux 4 in #200 - maybe it requires that version?

[evayde]

I fixed it myself. It has nothing to do with the redux version. The problem is importing the dist file. You have to import source-files for some middlewares, like so:

import logger from 'redux-logger/src';

I also have an angular project with redux and this project doesnt have this problem. So maybe it is worth mentioning somewhere or changing the configuration.

[keanulee]

Thanks for investigating @evayde . Our setup/tooling requires the use of ES modules - since redux-logger doesn't have module in package.json, we must rely on the the source which is written with ES modules.