middleware is not a function

I can’t tell if this is a redux-thunk or a redux issue.

I have a store like this:

const store = compose(
    applyMiddleware(
        thunk,
        logger
    )
)(createStore)(counter);

This results in an error message:

./node_modules/redux/lib/utils/applyMiddleware.js:50
        return middleware(middlewareAPI);
               ^

TypeError: middleware is not a function
    at ./node_modules/redux/lib/utils/applyMiddleware.js:50:16
    at Array.map (native)
    at ./node_modules/redux/lib/utils/applyMiddleware.js:49:27
    at Object.<anonymous> (./index.js:63:105)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:311:12)
    at Function.Module.runMain (module.js:457:10)
    at startup (node.js:136:18)

If I comment out thunk above, it continues:

const store = compose(
    applyMiddleware(
        // thunk,
        logger
    )
)(createStore)(counter);

store.dispatch({ type: INCREMENT });
store.dispatch({ type: INCREMENT });
store.dispatch({ type: DECREMENT });

$ node --harmony_default_parameters --harmony_destructuring index.js
will dispatch { type: 'INCREMENT' }
state after dispatch 1
will dispatch { type: 'INCREMENT' }
state after dispatch 2
will dispatch { type: 'DECREMENT' }
state after dispatch 1

Issue Analytics

State:
Created 8 years ago
Comments:34

Top GitHub Comments

106reactions

attsioncommented, Feb 16, 2016

use “import thunk from “redux-thunk”;” not “import {thunk} from “redux-thunk”;”

62reactions

savovskycommented, Jun 29, 2017

After facing recently same issue and none of the above worked for me I’ve tried with importing just {createLogger} that sorted the issue when new logger instance was passed to applyMiddleware.

import { applyMiddleware, createStore } from 'redux';
import promise from "redux-promise-middleware";
import thunk from "redux-thunk"
import { createLogger } from "redux-logger";

import reducer from "./reducers";
const middleware = applyMiddleware(  promise(),  thunk,  createLogger() );
export default createStore(reducer, middleware);

Works under Typescript and Babel because in my attempts to isolate the route cause I’ve switched to each of them. The issue is observed with latest redux packages at the time of my writing and solution is tested only against them

"react-redux": "^5.0.5",
"redux": "^3.7.1",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^4.3.0",
"redux-thunk": "^2.2.0"

Top Results From Across the Web

TypeError: middleware is not a function - Stack Overflow

I was getting the same error TypeError: middleware is not a function. import { createStore, combineReducers, applyMiddleware } from "redux"; ...

TypeError: middleware is not a function #144 - GitHub

Hello, I'm trying to create a middleware. Giving this error: TypeError: middleware is not a function Here is my code block: import ...

[Solved]-TypeError: middleware is not a function-Reactjs

I was getting the same error TypeError: middleware is not a function. import { createStore, combineReducers, applyMiddleware } from "redux"; import { ...

Middleware | NestJS - A progressive Node.js framework

Middleware is a function which is called before the route handler. Middleware functions have access to the request and response objects, and the...

Using middleware - Express.js

If the current middleware function does not end the request-response cycle, it must call next() to pass control to the next middleware function....