javascript - 无法从 `../../../../src/redux` 解析模块 `node_modules\react-redux\lib\connect\mapDispatchToProps.js`

Question

我正在尝试在我的 react native 应用程序中添加 redux，但是当我启动应用程序时出现此错误。我已按照这些步骤(Unable to resolve module `../../../../src/redux` from `node_modules/react-redux/lib/connect/mapDispatchToProps.js)但仍然收到此错误
错误

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);

包.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'
        },
      },
    ],
  ],
}

Answer 1

从 babel 别名中删除 'redux' 并运行 'react-native start --reset-cache'