7
votes

I am new to React and React Native and I am stuck with debugging process. I have used redux and want to check the action and state changes in the redux debug tool.

Following steps I have followed:

  1. Installed Redux DevTool extension in chrome
  2. Installed npm install --save-dev redux-devtools-extension
  3. Configured this in App.js as follows

import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(rootReducers, composeWithDevTools());

  1. Pressed Control + M in emulator clicked on Start Debugging.

  2. Reloaded the app.

  3. Got Error

    Error: EISDIR: illegal operation on a directory, read at Object.readSync (fs.js:592:3) at tryReadSync (fs.js:366:20) at Object.readFileSync (fs.js:403:19) at UnableToResolveError.buildCodeFrameMessage(/home/gaurav/reactproject/shopping/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17) at new UnableToResolveError (/home/gaurav/reactproject/shopping/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35) at ModuleResolver.resolveDependency (/home/gaurav/reactproject/shopping/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15) at DependencyGraph.resolveDependency (/home/gaurav/reactproject/shopping/node_modules/metro/src/node-haste/DependencyGraph.js:413:43) at /home/gaurav/reactproject/shopping/node_modules/metro/src/lib/transformHelpers.js:317:42 at /home/gaurav/reactproject/shopping/node_modules/metro/src/Server.js:1471:14 at Generator.next (<anonymous>)

If debug mode is stopped, I don't get any error in the terminal. Following are dependencies in the project.

"dependencies": {
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/native": "^5.9.3",
"@react-navigation/stack": "^5.14.3",
"react": "17.0.1",
"react-native": "0.64.0",
"react-native-gesture-handler": "^1.10.3",
"react-native-reanimated": "^2.0.0",
"react-native-safe-area-context": "^3.2.0",
"react-native-screens": "^2.18.1",
"react-native-vector-icons": "^8.1.0",
"react-navigation-header-buttons": "^7.0.0",
"react-redux": "^7.2.2",
"redux": "^4.0.5"
},
"devDependencies": {
"@babel/core": "7.13.10",
"@babel/runtime": "7.13.10",
"@react-native-community/eslint-config": "2.0.0",
"babel-jest": "26.6.3",
"eslint": "7.14.0",
"jest": "26.6.3",
"metro-react-native-babel-preset": "0.64.0",
"react-devtools": "^4.10.1",
"react-test-renderer": "17.0.1",
"redux-devtools-extension": "^2.13.9"
},

In the emulator, I also got errors as showing in the screenshot. enter image description here It would be a great help if anyone could help in finding a solution to that.

Thanks.

Hello, do you find a solution?Guillaume
No, I didn't find the solution.Gaurav Khatri
Interestingly enough for me debugging is working just fine on chrome, even though I am getting this error, I think it is becoming a blocker with the redux debugger.soumitra