CODEWITHSUNDEEP
reactjsreact-nativereduxreact-redux
thatman303
thatman303

Reputation: 183

Unable to resolve module Error in React Native Redux Toolkit

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;

Upvotes: 3

Views: 3632

Answers (4)

riane riri
riane riri

Reputation: 11

I found this solution that solved this kind of problem for me

=> by changing the file metro.config.js to :

 const defaultSourceExts =
 require('metro-config/src/defaults/defaults').sourceExts;
module.exports = {
 transformer: {
   getTransformOptions: () => ({
     transform: {
       experimentalImportSupport: false,
       inlineRequires: true,
     },
   }),
 },
 resolver: {
   sourceExts: process.env.RN_SRC_EXT
     ? [...process.env.RN_SRC_EXT.split(',').concat(defaultSourceExts), 'cjs'] // <-- cjs added here
     : [...defaultSourceExts, 'cjs'], // <-- cjs added here
 },
};

or if you are using expo you may need this one

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.sourceExts.push('mjs');

module.exports = config;

Upvotes: 0

Prince Dennis
Prince Dennis

Reputation: 1

When i had the same issue the best was to fix it was to reinstall dependencies with npm install. You can try removing in node_modules folder and the package-lock.json file and running npm install, Hope this helps.

Upvotes: 0

Tetsu
Tetsu

Reputation: 11

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.

Upvotes: 1

Aman
Aman

Reputation: 11

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

Upvotes: 1

Related Questions