title: Unable to resolve module `../../../../src/redux` from `node_modules\react-redux\lib\connect\mapDispatchToProps.js`
body: <p>I am trying to add redux in my react native app but, when I start the app I got this error. I have followed this steps (<a href="https://stackoverflow.com/questions/62931287/unable-to-resolve-module-src-redux-from-node-modules-react-redux">Unable to resolve module `../../../../src/redux` from `node_modules/react-redux/lib/connect/mapDispatchToProps.js</a>) but still got this error</p>
  <p><strong>Error</strong></p>
  <pre><code>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 (M:\Cimon\Files\Chaoh\chaohApp\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:163:15)
      at ResolutionRequest.resolveDependency (M:\Cimon\Files\Chaoh\chaohApp\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:52:18)
      at DependencyGraph.resolveDependency (M:\Cimon\Files\Chaoh\chaohApp\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
      at Object.resolve (M:\Cimon\Files\Chaoh\chaohApp\node_modules\metro\src\lib\transformHelpers.js:267:42)
      at M:\Cimon\Files\Chaoh\chaohApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
      at Array.map (&lt;anonymous&gt;)
      at resolveDependencies (M:\Cimon\Files\Chaoh\chaohApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18)
      at M:\Cimon\Files\Chaoh\chaohApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33
      at Generator.next (&lt;anonymous&gt;)
      at asyncGeneratorStep (M:\Cimon\Files\Chaoh\chaohApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
  </code></pre>
  <p><strong>index.js</strong></p>
  <pre><code>import {AppRegistry} from 'react-native';
  import { Provider } from 'react-redux';
  import { store } from &quot;reduxCore&quot;;
  import App from './src/App';
  import {name as appName} from './app.json';
  
  const ReduxApp = () =&gt; {
      &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;
  }
  
  AppRegistry.registerComponent(appName, () =&gt; ReduxApp);
  </code></pre>
  <p><strong>src/App.js</strong></p>
  <pre><code>import React, { Component } from 'react';
  import EStyleSheet from 'react-native-extended-stylesheet';
  import {PersistGate} from 'redux-persist/integration/react';
  
  import createNavigator from './screens';
  import {setStateAsynchronous} from 'utils/utils';
  import {setNavigator} from 'utils/navigator';
  import {COLOR_PALLETES} from 'utils/constants';
  
  import {store, persistor} from 'reduxCore';
  
  class App extends Component {
    constructor() {
      super();
      EStyleSheet.build({...COLOR_PALLETES});
      this.state = {
        appNavigator: null,
        isLoginSessionValid: false,
      }
    }
  
    checkUserAuth() {
      const {isLoginSessionValid} = this.state;
      setTimeout(async () =&gt; {
        await setStateAsynchronous(this, {
          appNavigator: createNavigator({
            initialRouteName: isLoginSessionValid
              ? 'Home'
              : 'Onboarding'
          })
        });
      }, 1);
    }
  
    componentDidMount() {
      this.unsubscribeStore = store.subscribe();
    }
    componentWillUnmount() {
      this.unsubscribeStore &amp;&amp; this.unsubscribeStore();
    }
  
    render(){
      const AppNavigator = this.state.appNavigator;
  
      return (
        &lt;PersistGate onBeforeLift={() =&gt; this.checkUserAuth()} loading={null} persistor={persistor}&gt;
        {AppNavigator ? (
          &lt;AppNavigator ref={navigatorRef =&gt; setNavigator('appNavigator', navigatorRef)}/&gt;
        ) : &lt;React.Fragment /&gt;}
        &lt;/PersistGate&gt;
      );
    }
   
  };
  
  export default App;
  </code></pre>
  <p><strong>src/appRedux/index.js</strong></p>
  <pre><code>import {persistStore, persistReducer, createMigrate} from 'redux-persist';
  import AsyncStorage from '@react-native-community/async-storage';
  import {createStore, applyMiddleware, compose} from 'redux';
  import Thunk from 'redux-thunk';
  
  import reducers from './reducers';
  import migration from './migrations';
  import {packageJson} from 'utils/utils';
  
  const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    version: packageJson().reduxPersistVersion,
    migrate: createMigrate(migration, {debug: __DEV__})
  };
  
  const persistedReducer = persistReducer(persistConfig, reducers);
  
  const composeEnhancers = process.env.NODE_ENV !== 'production' &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
  
  export const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(Thunk)));
  export const persistor = persistStore(store);
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre><code>{
    &quot;name&quot;: &quot;APPNAME&quot;,
    &quot;version&quot;: &quot;APPVERSION&quot;,
    &quot;private&quot;: true,
    &quot;reduxPersistVersion&quot;: 8,
    &quot;scripts&quot;: {
      &quot;android&quot;: &quot;react-native run-android&quot;,
      &quot;ios&quot;: &quot;react-native run-ios&quot;,
      &quot;start&quot;: &quot;react-native start&quot;,
      &quot;test&quot;: &quot;jest&quot;,
      &quot;lint&quot;: &quot;eslint .&quot;
    },
    &quot;dependencies&quot;: {
      &quot;@fortawesome/fontawesome-svg-core&quot;: &quot;^1.2.30&quot;,
      &quot;@fortawesome/free-solid-svg-icons&quot;: &quot;^5.14.0&quot;,
      &quot;@fortawesome/react-fontawesome&quot;: &quot;^0.1.11&quot;,
      &quot;@fortawesome/react-native-fontawesome&quot;: &quot;^0.2.5&quot;,
      &quot;@react-native-community/async-storage&quot;: &quot;^1.11.0&quot;,
      &quot;@react-native-community/masked-view&quot;: &quot;^0.1.10&quot;,
      &quot;prop-types&quot;: &quot;^15.7.2&quot;,
      &quot;react&quot;: &quot;16.13.1&quot;,
      &quot;react-native&quot;: &quot;0.63.2&quot;,
      &quot;react-native-dash&quot;: &quot;0.0.11&quot;,
      &quot;react-native-divider&quot;: &quot;^1.0.3&quot;,
      &quot;react-native-dotenv&quot;: &quot;^0.2.0&quot;,
      &quot;react-native-extended-stylesheet&quot;: &quot;^0.12.0&quot;,
      &quot;react-native-gesture-handler&quot;: &quot;^1.7.0&quot;,
      &quot;react-native-localization&quot;: &quot;^2.1.6&quot;,
      &quot;react-native-reanimated&quot;: &quot;^1.10.1&quot;,
      &quot;react-native-safe-area-context&quot;: &quot;^3.1.1&quot;,
      &quot;react-native-screens&quot;: &quot;^2.9.0&quot;,
      &quot;react-native-size-matters&quot;: &quot;^0.3.0&quot;,
      &quot;react-native-spinkit&quot;: &quot;^1.5.0&quot;,
      &quot;react-native-svg&quot;: &quot;^12.1.0&quot;,
      &quot;react-native-svg-transformer&quot;: &quot;^0.14.3&quot;,
      &quot;react-navigation&quot;: &quot;^4.4.0&quot;,
      &quot;react-navigation-stack&quot;: &quot;^2.8.2&quot;,
      &quot;react-redux&quot;: &quot;^7.2.1&quot;,
      &quot;redux&quot;: &quot;^4.0.5&quot;,
      &quot;redux-persist&quot;: &quot;^6.0.0&quot;,
      &quot;redux-thunk&quot;: &quot;^2.3.0&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.10.5&quot;,
      &quot;@babel/runtime&quot;: &quot;^7.10.5&quot;,
      &quot;@react-native-community/eslint-config&quot;: &quot;^2.0.0&quot;,
      &quot;babel-jest&quot;: &quot;^26.1.0&quot;,
      &quot;babel-plugin-module-resolver&quot;: &quot;^4.0.0&quot;,
      &quot;eslint&quot;: &quot;^7.5.0&quot;,
      &quot;jest&quot;: &quot;^26.1.0&quot;,
      &quot;metro-react-native-babel-preset&quot;: &quot;^0.61.0&quot;,
      &quot;react-test-renderer&quot;: &quot;16.13.1&quot;
    },
    &quot;jest&quot;: {
      &quot;preset&quot;: &quot;react-native&quot;
    }
  }
  </code></pre>
  <p><strong>babel.config.js</strong></p>
  <pre><code>module.exports = {
    presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['./src'],
          alias: {
            localization: &quot;./src/localization&quot;,
            utils: &quot;./src/utils&quot;,
            views: &quot;./src/views&quot;,
            components: &quot;./src/components&quot;,
            assets: &quot;./src/assets&quot;,
            reduxCore: './src/appRedux'
          },
        },
      ],
    ],
  }
  </code></pre>