4

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 (Unable to resolve module `../../../../src/redux` from `node_modules/react-redux/lib/connect/mapDispatchToProps.js) but still got this error

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 (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 (<anonymous>)
    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 (<anonymous>)
    at asyncGeneratorStep (M:\Cimon\Files\Chaoh\chaohApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)

index.js

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

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

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

src/App.js

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 () => {
      await setStateAsynchronous(this, {
        appNavigator: createNavigator({
          initialRouteName: isLoginSessionValid
            ? 'Home'
            : 'Onboarding'
        })
      });
    }, 1);
  }

  componentDidMount() {
    this.unsubscribeStore = store.subscribe();
  }
  componentWillUnmount() {
    this.unsubscribeStore && this.unsubscribeStore();
  }

  render(){
    const AppNavigator = this.state.appNavigator;

    return (
      <PersistGate onBeforeLift={() => this.checkUserAuth()} loading={null} persistor={persistor}>
      {AppNavigator ? (
        <AppNavigator ref={navigatorRef => setNavigator('appNavigator', navigatorRef)}/>
      ) : <React.Fragment />}
      </PersistGate>
    );
  }
 
};

export default App;

src/appRedux/index.js

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' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;

export const store = createStore(persistedReducer, composeEnhancers(applyMiddleware(Thunk)));
export const persistor = persistStore(store);

package.json

{
  "name": "APPNAME",
  "version": "APPVERSION",
  "private": true,
  "reduxPersistVersion": 8,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@fortawesome/react-native-fontawesome": "^0.2.5",
    "@react-native-community/async-storage": "^1.11.0",
    "@react-native-community/masked-view": "^0.1.10",
    "prop-types": "^15.7.2",
    "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-dash": "0.0.11",
    "react-native-divider": "^1.0.3",
    "react-native-dotenv": "^0.2.0",
    "react-native-extended-stylesheet": "^0.12.0",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-localization": "^2.1.6",
    "react-native-reanimated": "^1.10.1",
    "react-native-safe-area-context": "^3.1.1",
    "react-native-screens": "^2.9.0",
    "react-native-size-matters": "^0.3.0",
    "react-native-spinkit": "^1.5.0",
    "react-native-svg": "^12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-navigation": "^4.4.0",
    "react-navigation-stack": "^2.8.2",
    "react-redux": "^7.2.1",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.10.5",
    "@babel/runtime": "^7.10.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.1.0",
    "babel-plugin-module-resolver": "^4.0.0",
    "eslint": "^7.5.0",
    "jest": "^26.1.0",
    "metro-react-native-babel-preset": "^0.61.0",
    "react-test-renderer": "16.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset', 'module:react-native-dotenv'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias: {
          localization: "./src/localization",
          utils: "./src/utils",
          views: "./src/views",
          components: "./src/components",
          assets: "./src/assets",
          reduxCore: './src/appRedux'
        },
      },
    ],
  ],
}
1
  • I had the same issue and after searching for about 5 hours, I found out it was my babel aliases that were interpreted inside react-redux somehow. Others have suggested to install redux as a way to fix the issue but it didn't work out for me. Hope it can help you find the root of this issue. Commented Aug 5, 2020 at 13:49

1 Answer 1

3

remove 'redux' from babel alias and run 'react-native start --reset-cache'

Sign up to request clarification or add additional context in comments.

1 Comment

This worked for me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.