New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Redux] Adding multiple middleware conflict #199

Closed
evayde opened this Issue Jul 24, 2018 · 3 comments

Comments

Projects
None yet
2 participants
@evayde

evayde commented Jul 24, 2018

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.

@evayde evayde changed the title from Adding multiple middleware conflict to [Redux] Adding multiple middleware conflict Jul 24, 2018

@keanulee

This comment has been minimized.

Member

keanulee commented Jul 24, 2018

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

This comment has been minimized.

evayde commented Jul 24, 2018

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.

@evayde evayde closed this Jul 24, 2018

@keanulee

This comment has been minimized.

Member

keanulee commented Jul 24, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment