TypeError: undefined is not a function. Error i applyMiddleware in redx

[kaushiktd]

Prior Issues

Are there any existing issues or PRs that relate to this problem? If so, link them here.

What is the current behavior?

I am upgrading my expo version from 48 to 51. App buid 100% but after that it gives error in applyMiddleWare() function
TypeError: undefined is not a function,
in my configstore.js file

Steps to Reproduce

when i run sudo npx expo start --go
then android build 100% but then this issue occur

What is the expected behavior?

the error is resolved and app work fine

Environment Details

Which versions of Redux, and which browser and OS are affected by this issue? Did this work in previous versions of Redux?

"react-redux": "8.1.1",
"redux": "4.2.1",
"redux-actions": "2.6.5",
"redux-persist": "6.0.0",
"redux-thunk": "2.4.1",
"expo": "~51.0.6",
i am working on macOS

this is my ConfigStore file code

/** @format */
import Reactotron from 'reactotron-react-native';
import { applyMiddleware, compose, createStore } from 'redux';
import thunk from 'redux-thunk';

import reducers from '@redux';
import { Constants } from '@common';
import { connectConsoleToReactotron, DEV_ENV } from '@app/Omni';
import './../../ReactotronConfig';

const middleware = [
  thunk,
  // more middleware
];

// const store = createStore(reducers, {}, applyMiddleware(...middleware));

const configureStore = () => {
  let store = null;
  if (DEV_ENV) {
    if (Constants.useReactotron) {
      store = createStore(
        reducers,
        {},
        compose(applyMiddleware(...middleware), Reactotron.createEnhancer()),
      );
      connectConsoleToReactotron();
    } else {
      const composeEnhancers =
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
      store = composeEnhancers(applyMiddleware(...middleware))(createStore)(
        reducers,
      );

      if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept(reducers, () => {
          const nextRootReducer = reducers;
          store.replaceReducer(nextRootReducer);
        });
      }

      // show network react-native-debugger
      // only show on IOS, android bug
      // if (Platform.OS === "ios") {
      global.XMLHttpRequest = global.originalXMLHttpRequest
        ? global.originalXMLHttpRequest
        : global.XMLHttpRequest;
      global.FormData = global.originalFormData
        ? global.originalFormData
        : global.FormData;
    }
  } else {
    store = compose(applyMiddleware(...middleware))(createStore)(reducers);
  }
  return store;
};

export default configureStore();

 

[markerikson]

You left out what is probably the most relevant piece here:

const middleware = [
  thunk,
  // more middleware
];

It's almost definitely the "more middleware" that's the issue.

That said, you really should be using Redux Toolkit to set up the store, not the legacy redux package:

• https://redux.js.org/usage/migrating-to-modern-redux#store-setup-with-configurestore

[kaushiktd]

@markerikson thank you for your reply but i try using reduxjs-toolkit but i encountered a issue

ERROR TypeError: 0, import_redux4.isPlainObject is not a function (it is undefined), js engine: hermes

and i am using
"@reduxjs/toolkit": "^2.2.7",

[markerikson]

@kaushiktd then there has to be something wrong with your build setup, because we know that Redux Toolkit works (including on React Native).

Either way, the original issue is also not a bug in Redux - somehow you're ending up with something that is undefined in the middleware array.