TypeError: middleware is not a function, how to fix this issue?

Question

This is my code:

const redux = require("redux");
const thunkMiddleware = require("redux-thunk").default;
const axios = require("axios");
// -------------------------------
const createStore = redux.legacy_createStore;
const applyMiddleware = redux.applyMiddleware;

// action type ( intention )
const AXIOS_USER_REQUEST = "AXIOS_USER_REQUEST";
const AXIOS_USER_SUCCESS = "AXIOS_USER_SUCCESS";
const AXIOS_USER_ERROR = "AXIOS_USER_ERROR";

// action object creator ( function that creates action object )
const fetchUsers = () => {
  return {
    type: AXIOS_USER_REQUEST,
  };
};
const fetchUsersSuccess = (users) => {
  return {
    type: AXIOS_USER_SUCCESS,
    payload: users,
  };
};
const fetchUsersError = (error) => {
  return {
    type: AXIOS_USER_ERROR,
    payload: error,
  };
};

// default state object
const intialState = {
  loading: false,
  users: [],
  error: "",
};

// reducer
const reducer = (state = intialState, action) => {
  switch (action.type) {
    case AXIOS_USER_REQUEST:
      return {
        ...state,
        loading: true,
      };
    case AXIOS_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        users: action.payload,
      };
    case AXIOS_USER_ERROR:
      return {
        ...state,
        loading: false,
        error: action.payload,
      };
    default:
      return state;
  }
};
// thunk actions
const thunkFetchUsers = () => {
  return function (dispatch) {
    dispatch(fetchUsers());
  };
};
const thunkAjaxFetchUsersResponse = () => {
  return function (dispatch) {
    axios
      .get("https://reqres.in/vijay/vijay?page=1")
      .then((res) => dispatch(fetchUsersSuccess(res.data.data)))
      .catch((error) => dispatch(fetchUsersError(error.response.statusText)));
  };
};

// store
const store = createStore(reducer, applyMiddleware(thunkMiddleware));
console.log(store.getState());
console.log("********* subscribed  ********* ");
// subscribe
store.subscribe(() => {
  console.log(store.getState());
});
// dispatch
store.dispatch(thunkFetchUsers());
store.dispatch(thunkAjaxFetchUsersResponse());

and this is my error:

D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:407
    const chain = middlewares.map((middleware) => middleware(middlewareAPI));
                                                  ^

TypeError: middleware is not a function
    at D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:407:51
    at Array.map (<anonymous>)
    at D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:407:31
    at createStore (D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:133:33)
    at legacy_createStore (D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\node_modules\redux\dist\cjs\redux.cjs:258:10)
    at Object.<anonymous> (D:\Sadiq\Full Stack\ReactJS\day-11\plain-redux\step4.js:79:15)
    at Module._compile (node:internal/modules/cjs/loader:1368:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)

Node.js v21.7.1

how do i solve this issue?

I first checked all versions of "redux", "redux-thunk" and "axios", updated it but it still does not work. then i tried to reinstall the node-packages to ensure that my code works properly and give me the output in JSON Format. But it does not work and i dont know exactly how to solve it

Answer 1

I am certain that your thunkMiddleware is assigned to undefined. According to the "redux-thunk" docs, the middleware is exported under the thunk property, hence, instead of trying to import default from "redux-thunk", try replacing it with thunk.

const thunkMiddleware = require("redux-thunk").thunk;