Unable to resolve module `../../../../src/redux` from `node_modules/react-redux/lib/connect/mapDispatchToProps.js

Question

I am trying to add redux with redux toolkit to an existing react native app with my first attempt at atomic design.

I have wrapped my index.js components in a <Provider> per the docs but it seems like react-redux is searching for a location called 'src/redux' which is throwing an error.

I originally tried to combine all redux functionality within an 'src/redux' folder and used jsonconfig.json to alias '_redux' to path 'src/redux' with subfolders and index.js files pointing to subfolders 'actions', 'reducers' and 'store'.

I came across some errors and figured it was probably bad form to have a folder called 'redux' so I changed it to 'appRedux' and then this problem appeared.

I've dropped node_modules and reinstalled multiple times, cleared metro caches, searched for any reference to 'src/redux' across the app, and finally started again from scratch by resetting git to HEAD and adding appRedux and new modules again, only to encounter the same error. Now I'm guessing that perhaps the folder naming issue was only a coincidence, but I'm at a loss on how to resolve.

Any pointers? There is not much out there on redux-toolkit with react native and I'd prefer not to have to write all the boilerplate redux code.

Full error:

error: Error: Unable to resolve module `../../../../src/redux` from `node_modules/react-redux/lib/connect/mapDispatchToProps.js`: 

None of these files exist:
  * src/redux(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg)
  * src/redux/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.svg|.native.svg|.svg)
    at ModuleResolver.resolveDependency (/APPDIR/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/APPDIR/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/APPDIR/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at Object.resolve (/APPDIR/node_modules/metro/src/lib/transformHelpers.js:267:42)
    at /APPDIR/node_modules/metro/src/DeltaBundler/traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (/APPDIR/node_modules/metro/src/DeltaBundler/traverseDependencies.js:431:18)
    at /APPDIR/node_modules/metro/src/DeltaBundler/traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/APPDIR/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)

package.json:

{
  "name": "*APPNAME*",
  "version": "*VERSION*",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/native": "^5.6.0",
    "@react-navigation/stack": "^5.5.1",
    "@reduxjs/toolkit": "^1.4.0",
    "axios": "^0.19.2",
    "compare-versions": "^3.6.0",
    "react": "16.11.0",
    "react-devtools": "^4.7.0",
    "react-native": "0.62.2",
    "react-native-camera": "^3.31.0",
    "react-native-elements": "^2.0.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.0.6",
    "react-native-screens": "^2.9.0",
    "react-native-sensitive-info": "^5.5.5",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-vector-icons": "^6.6.0",
    "react-native-version-number": "^0.3.6",
    "react-navigation": "^4.3.9",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },
  "devDependencies": {
    "@babel/core": "^7.10.2",
    "@babel/runtime": "^7.10.2",
    "@react-native-community/eslint-config": "^1.1.0",
    "babel-jest": "^26.0.1",
    "babel-plugin-module-resolver": "^3.2.0",
    "eslint": "^7.2.0",
    "eslint-import-resolver-babel-module": "^5.1.0",
    "eslint-plugin-import": "^2.18.2",
    "jest": "^26.0.1",
    "metro-react-native-babel-preset": "^0.59.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

jsonconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "_assets": ["src/assets/*"],
      "_components": ["src/components/*"],
      "_atoms": ["src/components/atoms/*"],
      "_molecules": ["src/components/molecules/*"],
      "_organisms": ["src/components/organisms/*"],
      "_navigations": ["src/navigations/*"],
      "_scenes": ["src/scenes/*"],
      "_services": ["src/services/*"],
      "_styles": ["src/styles/*"],
      "_utils": ["src/utils/*"],
      "_app_redux": ["src/appRedux/*"]
    }
  }
}

src/index.js:

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from 'react-native-screens/native-stack';
import {Provider} from 'react-redux';
import {store} from '_app_redux';

import {*VARIOUS_SCENES*} from '_scenes';

const Stack = createNativeStackNavigator();

const App: () => React$Node = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="*INITIAL_SCENE*" mode="modal">
          *<VARIOUS_SCENES>*
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};

export default App;

src/appRedux/store/store.js:

import {configureStore} from '@reduxjs/toolkit';

export default configureStore({
  reducer: {},
});

Yes, that's a direct copy from the error message. That's why I assumed somehow it was referring to my deleted src/redux folder. But when I reset the branch I figured that would reference would for sure disappear. — peekay, Jul 16 '20 at 09:27
can you share the redux create the file? It should be like this `import { createStore } from 'redux';` with fancy brackets — Ugur, Jul 16 '20 at 09:31
I believe that is handled by `@reduxjs/toolkit` through `configureStore`. Otherwise, perhaps I have missed something because I don't user createStore anywhere. — peekay, Jul 16 '20 at 09:34

Giovanni Esposito · Accepted Answer · 2020-07-16T14:54:05.763

1

Ciao, <Provider> wrapper must be used into the index.js file located on your root folder. Here an example:

index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';
import { store } from "./app/redux/store";


const ReduxApp = () => (
    <Provider store={store}>
        <App />
    </Provider>
 )

 AppRegistry.registerComponent(appName, () => ReduxApp);

Note: answer updated after user feedback

edited Jul 16 '20 at 14:54

answered Jul 16 '20 at 09:53

Giovanni Esposito

10,696
1
14
30

Ciao Giovanni and grazie. Step 2 is the answer - I added the `` wrapper at the wrong index.js, after moving it to the index.js in the root folder (rather than src/index.js) the problem disappeared (and was replaced by another, but that's a story for another day!). Perhaps you could adjust your answer to just focus on wrapping the correct index.js without the other changes - in any case thank you! – peekay Jul 16 '20 at 14:27
I'm very happy to ear that. I will update my answer removing first step. Ciao and have a nice day :) – Giovanni Esposito Jul 16 '20 at 14:34

Denish Gabani · Answer 2 · 2022-09-18T05:38:02.077

I do not think that is the issue because in my previous project I have set <Provider> inside app and that is working fine for me I don't know why getting this in my new project.

Previous Project Code

App.tsx

import * as React from 'react';
import {Provider} from 'react-redux';
import ShopList from './src/pages/ShopList';
import {store} from './src/redux/store';

const App = () => {
  return (
    <Provider store={store}>
      <ShopList />
    </Provider>
  );
};

export default App;

index.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

EDITED:

Solution:

Proposed solution is if you're using path alias with TypeScript then remove that for redux folder you're using from babel.config.js and tsconfig.json too.

Unable to resolve module `../../../../src/redux` from `node_modules/react-redux/lib/connect/mapDispatchToProps.js

2 Answers2

Linked