Невозможно разрешить модуль `../../../../ src / redux` из` node_modules / response-redux / lib / connect / mapDispatchToProps.js

Я пытаюсь добавить redux с помощью набора инструментов redux в существующее приложение для реагирования с моей первой попыткой атомарного дизайна.

Я обернул свои компоненты index.js в <Provider> для документов, но похоже, что react-redux ищет место под названием 'src / redux', которое выдает ошибку.

Первоначально я пытался объединить все функции redux в папке src / redux и использовал jsonconfig.json для псевдонима _redux для пути src / redux с вложенными папками и файлами index.js, указывающими на действия вложенных папок, «redux» и «магазин».

Я столкнулся с некоторыми ошибками и подумал, что, вероятно, иметь папку с именем redux - плохой тон, поэтому я изменил ее на appRedux, и тогда появилась эта проблема.

Я отбрасывал node_modules и переустанавливал несколько раз, очищал кеши метро, ​​искал любую ссылку на 'src / redux' в приложении и, наконец, начал снова с нуля, сбросив git в HEAD и снова добавив appRedux и новые модули, только чтобы встретить та же ошибка. Теперь я предполагаю, что, возможно, проблема с именованием папок была просто совпадением, но я не знаю, как ее решить.

Есть указатели? В redux-toolkit не так много возможностей с react native, и я бы предпочел не писать весь шаблонный код redux.

Полная ошибка:

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: {},
});

person peekay    schedule 16.07.2020    source источник
comment
Вы уверены, что адрес этой папки? ../../../../src/redux   -  person Ugur    schedule 16.07.2020
comment
Да, это прямая копия сообщения об ошибке. Вот почему я почему-то предположил, что это относится к моей удаленной папке src / redux. Но когда я сбросил ветку, я решил, что ссылка наверняка исчезнет.   -  person peekay    schedule 16.07.2020
comment
вы можете поделиться сокращением создать файл? Это должно быть так import { createStore } from 'redux'; с причудливыми скобками   -  person Ugur    schedule 16.07.2020
comment
Я считаю, что этим занимается от @reduxjs/toolkit до configureStore. В противном случае, возможно, я что-то упустил, потому что нигде не пользуюсь createStore.   -  person peekay    schedule 16.07.2020


Ответы (1)


Ciao, <Provider> оболочка должна использоваться в файле index.js, расположенном в вашей корневой папке. Вот пример:

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

Примечание: ответ обновлен после отзыва пользователя

person Giovanni Esposito    schedule 16.07.2020
comment
Чао Джованни и Грацие. Шаг 2 - это ответ - я добавил обертку <provider> не в тот index.js, после перемещения ее в index.js в корневой папке (а не в src / index.js) проблема исчезла (и была заменена другой, но это история на другой день!). Возможно, вы могли бы скорректировать свой ответ, чтобы просто сосредоточиться на упаковке правильного index.js без других изменений - в любом случае спасибо! - person peekay; 16.07.2020
comment
Я очень рад это слышать. Я обновлю свой ответ, удалив первый шаг. Чао и хорошего дня :) - person Giovanni Esposito; 16.07.2020