react-native-debugger: React Native Debugger doesn't use the global react-devtools version and still shows 'Unsupported' error

Hello all,

I’m having trouble using react native debugger. I get the ‘Unsupported’ error telling me to downgrade to 4.11.0. After I ran npm i -g react-devtools@"4.11.0", it installed the react-devtools@4.10.4 version globally. I checked that with npm list -g and it was installed correctly.

The issue is that even though I have the react-devtools version 4.10.4 installed globally, I still see the same ‘Unsupported’ error message.

In the react native debugger app, the DevTools header still indicates version 4.13.4-51ebccc374 which I guess was installed by default when I installed react native debugger.

It seems that React Native Debugger doesn’t use the global react-devtools version.

I installed react native debugger with homebrew: brew install --cask react-native-debugger

I already tried uninstalling react native debugger, react-devtools and reinstalling everything again. With no success though…

Any ideas what else can I try ?

React Native Debugger app version: 0.11.9 React Native version: 0.62.2 Platform: iOS Operating System: macOS Big Sur 11.4 Homebrew version: 3.1.9

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Reactions: 22
  • Comments: 31 (2 by maintainers)

Most upvoted comments

Exact same as @anttiabel. I am making a new issue as it seems to be re-broken.

EDIT: Changing to use the resolution of the version that RND is using fixed this issue:

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

DO NOT upgrade to 4.22.1, remove all of those and just add this resolution (in my case with yarn workspaces to the package.json that contains the RN project).

for anyone who still find solution Note: I’m running MacOS 10.15.7 (19H114)

first download react-native-debugger. Then you must open it at least 1 time

npm i -g asar
asar e /Applications/React\ Native\ Debugger.app/Contents/Resources/app.asar /tmp/app
cd /tmp/app

# option 1
npm install react-devtools-core@^4 # or 4.22.1

## option 2
## If you still unlucky, try edit `/tmp/app/package.json` as photo below, then execute next line
# npm update react-devtools-core

# last step
asar p . /Applications/React\ Native\ Debugger.app/Contents/Resources/app.asar

image

The “Unsupported DevTools backend version” error persists for me, having tried everything listed. The tool seems bent on using react-devtools 4.14.0-d0ec283819 no matter how I try to upgrade to 4.22.1 everywhere for both react-devtools and react-devtools-core. I am working on an Expo project, on a Mac.

@jack-ayoka I can describe what I did.

  1. in your package json add resolution

  2. yarn/npm install - it will change in yarn.lock/package-lock file version of react-dev-core

  3. install globally react-devtools if you don’t have

  4. paste command from RN debugger which you receive in terminal and execute.

for anyone who still find solution Note: I’m running MacOS 10.15.7 (19H114)

first download react-native-debugger. Then you must open it at least 1 time

npm i -g asar
asar e /Applications/React\ Native\ Debugger.app/Contents/Resources/app.asar /tmp/app
cd /tmp/app

# option 1
npm install react-devtools-core@^4 # or 4.22.1

## option 2
## If you still unlucky, try edit `/tmp/app/package.json` as photo below, then execute next line
# npm update react-devtools-core

# last step
asar p . /Applications/React\ Native\ Debugger.app/Contents/Resources/app.asar

image

This was exactly the fix that worked for me. Thanks!

it does not work and not clear solution. I removed from yarn.lock as you wrote, but got error when run application.

@Arkan4ik what error did you got from running application?

Here is another method:

  • Use yarn resolutions, just add "react-devtools-core": "^4.13.4" to resolutions of package.json.

For npm lovers, you can add a "preinstall": "npx npm-force-resolutions" script on your package.json. This will force the resolutions found on your package.json. More info here. Once you do an npm i you should see if the react-devtools-core is set to 4.14.0 (command: npm ls react-devtools-core) if not, do another npm i and it should resolve it to 4.14.0

Exact same as @anttiabel. I am making a new issue as it seems to be re-broken.

EDIT: Changing to use the resolution of the version that RND is using fixed this issue:

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

DO NOT upgrade to 4.22.1, remove all of those and just add this resolution (in my case with yarn workspaces to the package.json that contains the RN project).

This worked for me. Started a brand new RN app, using CLI. Debugger showed version mismatch error. Added the resolution to 4.14.0. Ran yarn install. Rebuilt app. Debugger works.

For npm, simply add

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

Please see the release note:

Note about React DevTools

If you got Unsupported message or some errors from React DevTools, please read the documentation first.

Question: I got Unsupported meesage from React DevTools

If you’re using React Native version >= 0.62 and keep React Native Debugger as the latest version, here is what you can do:

In your app project, upgrade react-devtools-core dependency to match the React DevTools version:

  • OPTION 1: Just yarn upgrade react-native
  • OPTION 2: Delete react-devtools-core block in yarn.lock, then re-install dependencies by yarn

Why is every comment suggesting to pin to something like 4.14.0 when the error message says <4.11? Is the error message wrong and the requirement is rather >4.11?

I’m really confused by this error message.

For me the error never went even if i added the below and did a npm i (expo project) and also i tried all possible solutions as well with NPM

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

So i created a new expo project with yarn now instead of npm and added the above in package.json and run yarn install and yarn start surprise react native debugger worked with the Unsupported error (Tested only in android)

@jack-ayoka I can describe what I did.

  1. in your package json add resolution
  1. yarn/npm install - it will change in yarn.lock/package-lock file version of react-dev-core
  2. install globally react-devtools if you don’t have
  3. paste command from RN debugger which you receive in terminal and execute.

After banging on this for hours yesterday, this worked!!! thank you so much! Do note, i also had to uninstall react-devtools and react-devtools-core from my local project. so the only thing referencing react-devtools locally was react-native, and the ‘resolutions’ section.

Seems like https://github.com/jhen0409/react-native-debugger/pull/706 is the PR to fix this by upgrading react-devtools-core in react-native-debugger.

I "npm install"ed ‘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

For me the error never went even if i added the below and did a npm i (expo project) and also i tried all possible solutions as well with NPM

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

So i created a new expo project with yarn now instead of npm and added the above in package.json and run yarn install and yarn start surprise react native debugger worked with the Unsupported error (Tested only in android)

This worked for me! I was using npm and switched to yarn. I had to rm -r node_modules and rm -r package-lock.json and do yarn install (npm i -g yarn if you don’t have yarn yet) and surprisingly it worked!

Same for me as @anttiabel