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')
);

Elkeelkhound

Answer 1

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)
)

Rheumy

Thanks for your answer! using the default import and passing it to the applyMiddleware works for me. Also, thanks for referencing the doc. – Elkeelkhound

Answer 2

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

Cabotage

Answer 3

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.

Gratulate

Answer 4

the easiest way to fix the issue

import * as thunk from 'redux-thunk';



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

Michaella

Answer 5

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

Hydrops

Answer 6

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

Skepful

Can you explain why this works? and also where can i read more about this – Buxton

Answer 7

In my case, I call the ThunkMiddleware and pass it in to the applyMiddleware method. To fix the issue I used the following code :

const createStore = redux.createStore;
const applyMiddleware = redux.applyMiddleware;

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FEATCH_USERS_REQUEST:
      return {
        ...state,
        loading: true,
      };
    case FEATCH_USERS_SUCCESS:
      return {
        loading: false,
        users: action.payload,
        error: "",
      };
    case FEATCH_USERS_FAILURE:
      return {
        loading: false,
        users: [],
        error: action.payload,
      };
    default:
      return state;
  }
};

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

Fidel

Add const thunkMiddleware = require('redux-thunk'); instead of const thunkMiddleware = require('redux-thunk').default; for the imports. – Destination

Answer 8

I was using version 3.1.0 on React 18.2.0 and NextJS 11.1.4 when I got this error and my problem was solved by changing the Redux-thunk version to 2.3.0

Rathenau

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review – Debora

Answer 9

Please find below code for the solution:

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

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

Squirearchy

Answer 10

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)
}

Oireachtas

Answer 11

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

Courtroom

Answer 12

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.

Crabbe

Answer 13

If createStore' is deprecated then use

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers/rootReducer';


const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
});

export default store;

Yorktown