Unable to resolve module Error in React Native Redux Toolkit

Question

I am getting some weird error on adding Redux Provider in my App.tsx. I have all modules installed and did the "delete node_modules folder and npm install " process already, still can't figure out the issue

Unable to resolve module ../../../../src/redux from
MY_PROJECT_PATH\node_modules\@reduxjs\toolkit\dist\redux-toolkit.cjs.production.min.js:

App.tsx

import { Provider as ReduxProvider } from "react-redux";
import { NavigationContainer } from "@react-navigation/native";
import BottomTabs from "./src/containers/BottomTabs";
import { store } from "./src/redux/store";

export default function App() {
  return (
    <ReduxProvider store={store}>
      <NavigationContainer>
        <BottomTabs />
      </NavigationContainer>
    </ReduxProvider>
  );
}

store.ts

import { configureStore } from "@reduxjs/toolkit";
import themeReducer from "./themeSlice";

export const store = configureStore({
  reducer: {
    theme: themeReducer,
  },
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

themeSlice.ts

import { createSlice } from "@reduxjs/toolkit";
import { DEFAULT_DARK_THEME } from "../theme/DefaultDarkTheme";
import {
  DEFAULT_LIGHT_THEME,
  DEFAULT_LIGHT_THEME_ID,
} from "../theme/DefaultLightTheme";
const messageSlice = createSlice({
  name: "theme",
  initialState: DEFAULT_LIGHT_THEME,
  reducers: {
    toggleTheme(state) {
      if (state.id === DEFAULT_LIGHT_THEME_ID) return DEFAULT_DARK_THEME;
      return DEFAULT_LIGHT_THEME;
    },
  },
});

export const { toggleTheme } = messageSlice.actions;
export default messageSlice.reducer;

Answer 1

check your "dependencies" in package.json you'll figure it out there is no "@reduxjs/toolkit". just terminate all the process and add "reduxjs/toolkit" first.

by doing "yarn add @reduxjs/toolkit" or you can also go with npm

hope this will help you

Answer 2

I was having the same problem too.

Perhaps, you made redux directory in your application root and made an alias name redux for using absolute path in your babel.config.js? It conflicts the name of pure redux import.

In my case, I realized the name conflict, and removed the setting. But it still happened, then I could resolve it with running expo start -c for clearing cache.

I'm using Expo though, react-native start --reset-cache may solve the problem if you are not using Expo.