TypeError: middleware is not a function

Question

I'm trying to apply redux in my reactjs app. I can't proceed because of these errors:

I'm sure that I already installed all the dependencies that I need. Here is a relevant part of my package.json

"dependencies": {
   "react-redux": "^5.0.6",
   "redux": "^3.7.2",
   "redux-logger": "^3.0.6",
   "redux-promise": "^0.5.3",
   "redux-thunk": "^2.2.0",
}

Here is a part of my index.js that implements redux

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import reducers from './reducers';

const logger = createLogger();
const store = createStore(reducers,
    applyMiddleware(
        thunkMiddleware, logger
    )
)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

score 49 · Accepted Answer · answered Oct 22 '17 at 01:44

49

According to the docs you are mixing up the usage of redux-logger

You either need to import the specific createLogger function

import { createLogger } from 'redux-logger'

const logger = createLogger({
  // ...options
});

Or use the default import

import logger from 'redux-logger'

And then your code should be fine

const store = createStore(
  reducers,
  applyMiddleware(thunkMiddleware, logger)
)

answered Oct 22 '17 at 01:44

Balázs Édes

13,452
6
54
89

1

Thanks for your answer! using the default import and passing it to the applyMiddleware works for me. Also, thanks for referencing the doc. – James Solomon Belda Oct 22 '17 at 01:57

score 4 · Answer 2 · edited Aug 03 '18 at 12:32

I was getting the same error TypeError: middleware is not a function.

import { createStore, combineReducers, applyMiddleware } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";

import math from "./reducers/mathReducer";
import user from "./reducers/userReducer";

const logger = createLogger();

export default createStore(
  combineReducers({ math, user }),
  {},
  applyMiddleware(logger, thunk)
);

Replacing applyMiddleware(logger, thunk) with applyMiddleware(logger, thunk.default) worked for me.

score 4 · Answer 3 · answered Feb 12 '20 at 17:36

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

const middleware = applyMiddleware(reduxPromiseMiddleware, thunk, logger);
const store = createStore(reducer, middleware);

score 3 · Answer 4 · answered Feb 05 '19 at 17:30

3

the easiest way to fix the issue

import * as thunk from 'redux-thunk';



createStore(rootReducer, InitialState, applyMiddleware(thunk.default));

answered Feb 05 '19 at 17:30

Erastus ruiru

31
3

score 2 · Answer 5 · answered Oct 22 '17 at 01:45

I don't see react and react-dom in your dependencies, and it is not included in the import statements.

Let me provide you with an example of how I did an App recently, also using the redux developer tools which is amazing.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
import authReducer from '../reducers/auth';
import urlsReducer from '../reducers/urls';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

//Store creation
  const store = createStore(
    combineReducers({
      auth: authReducer,
      urls: urlsReducer
    }),
    composeEnhancers(applyMiddleware(reduxThunk))
  );

ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );

I would figure that you just need to add logger, after reduxThunk. And if you have already combined your reducers, then just provide reducers instead of combineReducers.

Regards, Rafael

score 1 · Answer 6 · edited Jul 21 '20 at 18:06

1

Please find below code for the solution:

const thunkMiddleware = require('redux-thunk').default;

const store = createStore(reducer, applyMiddleware(thunkMiddleware));

edited Jul 21 '20 at 18:06

Nensi Kasundra

1,980
6
21
34

answered Jul 21 '20 at 05:33

Gagan Sharma

9
1

score 1 · Answer 7 · answered May 29 '22 at 07:47

1

Simply add .default to the createStore function and solve the error Middleware is not a function.

answered May 29 '22 at 07:47

Anisur Rahman

21
4

Can you explain why this works? and also where can i read more about this – Anubhav Jangra Dec 15 '22 at 12:06

score 0 · Answer 8 · answered Sep 12 '19 at 17:59

I was trying to add logger to the list of middleware only in development but messed up the import and received the same error. To fix my issue, I needed to add .default to the require():

const middleware = []

if (process.env.NODE_ENV === 'development') {
  middleware.push(require('redux-logger').default)
}

score 0 · Answer 9 · answered Jan 03 '21 at 15:28

0

In my case i was calling middleware function before the store method

answered Jan 03 '21 at 15:28

Muteshi

820
1
10
25

score 0 · Answer 10 · answered Dec 27 '22 at 19:34

0

I just had the same problem, what @anisur-rahman suggested above worked for me. I just made the change from applyMiddleware(logger) to applyMiddleware(logger.default). I hope this helps and many thanks to @anisur-rahman for the solution.

answered Dec 27 '22 at 19:34

Yasir Ahmed

21
2

TypeError: middleware is not a function

10 Answers10

Linked