Same issue on:

• Windows 10
• ReactNative 0.68.0
• ReactNative Debugger 0.12.1

Problem

The problem occurs due to react-devtools-core version mismatch. React Native debugger uses "react-devtools-core": "4.14.0" (as of v0.12.0 changelog) but npx react-native init comes with the @latest version.

Remarks

When starting a project with npx react-native init, it comes with react-devtools-core installed, not react-devtools. Identify this with npm list foreach of these packages (locally in your project, NOT global):

So when it comes to react-devtools-core dependency, notice that it is a nested dependency of react-native.

As stated in https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides, you are able to select different version for dependencies of your dependencies with the overrides property in package.json. So the first thing that came in my mind, was adding the package version as an overrides to package.json and running a clean npm install:

"overrides": {
    "react-devtools-core": "4.14.0"
}

This will do the trick, but to be more precise react-devtools-core is a dependency of react-native, so it’s a dependency of your dependency as mentioned above.

Solution

1. Run npx react-native init YourProjectName (if you haven’t already).
2. Delete node_modules directory (and package-lock.json file if any).
3. Be sure that you don’t have react-devtools-core anywhere in your dependencies & add these lines to your package.json.

"overrides": {
    "react-native": {
        "react-devtools-core": "4.14.0"
    }
}

Exact version depends on the ReactNativeDebugger’s current react-devtools-core version (for 0.12.0-0.12.1 is 4.14.0) Notice that react-devtools-core is added as a dependency of react-native. 4. Run npm install 5. Uninstall any previous installs of your app, from you device or emulator 6. Now open React Native Debugger 7. Run npm run android 8. Selecting Debug from the developer menu, should now debug your app in ReactNativeDebugger

IMPORTANT NOTE: Not tested in macOS.

The same problem

The same problem

Or in case you use yarn:

  "resolutions": {
    "react-devtools-core": "4.14.0"
  },

same issue v0.12.1

on Mac OS (M1) the following fixed it for me:

yarn global add react-devtools react-devtools-core

and, in the app’s package.json:

"resolutions": {
    "react-devtools-core": "4.14.0"
  },

same issue here too

facing same issue

Facing the same issue too on pc This solution worked for me! https://github.com/facebook/react/issues/23226#issuecomment-1051006915

Facing same error. Any updates please?

same issue

In the react-devtools package, I got this all to work by upgrading both react-devtools and react-devtools-core to v4.22.1. If this repo could bump both versions up to put these packages back in sync that should hopefully solve the problem. Until then, I don’t think there’s a way to use this tool. I have the same error every time I launch, forcing me to go back to just plain react-devtools / browser-based react native debugger which launches with expo. It’s a real shame; I love how all of that is integrated in one place with RN-debugger.

For now, I just upgraded react-devtools from npm and customized the port it listens to via react-devtools-core, as documented here. Component and Profiler tabs, plus some console.logs is better than nothing I suppose!

I "npm install"ed (not globally) ‘react-devtools’ and ‘react-devtools-core’ and set them to the same version

“react-devtools”: “~4.14.0”, “react-devtools-core”: “~4.14.0”, and re-installed everything by deleting package-lock.json and node_modules

then ran npm install and it worked

I think the problem was those packages not being the same version

With React Native Debugger version 0.13.0 and a React Native project in 0.69.4, there is no need to add “overrides” or “resolution” for react-devtools-core in the package.json

Installing “'react-devtools” and “react-devtools-core” globally solved this issue by me. so just running:

1. npm install -g react-devtools
2. npm install -g react-devtools-core

In the react-devtools package, I got this all to work by upgrading both react-devtools and react-devtools-core to v4.22.1. If this repo could bump both versions up to put these packages back in sync that should hopefully solve the problem. Until then, I don’t think there’s a way to use this tool. I have the same error every time I launch, forcing me to go back to just plain react-devtools / browser-based react native debugger which launches with expo. It’s a real shame; I love how all of that is integrated in one place with RN-debugger.

For now, I just upgraded react-devtools from npm and customized the port it listens to via react-devtools-core, as documented here. Component and Profiler tabs, plus some console.logs is better than nothing I suppose!

“overrides” only works on npm version 8.3.0 and above. To update npm, run : npm install -g npm

same issue