Chrome DevTools for React-Native cannot group source files by folder on Windows

user_300913 0
Viewed 160

When I debug React-Native the source files on the Page tab in devtools never groups the files by folder on Windows 10, it shows a list of all js files (including all files in node_modules).

I created a basic test app using:

"dependencies": {
    "react": "17.0.2",
    "react-native": "0.65.1",
    "prop-types": "^15.6.0"
},

Ran: react-native run-android started the debugger and see this:

enter image description here

But I'd like to see a folder structure like this:
enter image description here

react-native google-chrome-devtools
1 Answers

After some research, I discovered that the issue might be from the latest react update.

1 - You can downgrade the version of your react project:

"dependencies": {
  "react": "16.2.0",
  "react-native": "0.52.2"
},

Then run these commands:

rm -rf node_modules android
npm install # this will bring folder node_modules back, with react/react-native of previous version
react-native eject # this will bring folder android back
react-native run-android

Or

2 - Disable User JS Delta :

Ctrl+m on your emulator, then click on Dev Settings.

Disable "User JS Delta" and restart the react native server. (Ctrl+c in the terminal and then npm run android).

user_115884450
Related