React Native Debugger doesn't use the global react-devtools version and still shows 'Unsupported' error #620

bogdandevlpr · 2021-06-07T07:37:11Z

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

The text was updated successfully, but these errors were encountered:

jhen0409 · 2021-06-07T11:04:10Z

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

Arkan4ik · 2021-06-08T06:49:40Z

@jhen0409 it does not work and not clear solution. I removed from yarn.lock as you wrote, but got error when run application. Then I installed react-dev-tools in dev dependency and project start working, but error that 'Unsupported DevTools backend version' is still reproduced. It is annoing thing espacially if you have several projects with different react native version.

jhen0409 · 2021-06-08T07:45:54Z

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.

Arkan4ik · 2021-06-08T10:24:59Z

@jhen0409 thanks. yarn resolutions and then updating global package works. I also see that you updated the doc. Awesome. Thank you

jack-ayoka · 2021-06-08T21:21:26Z

@jhen0409 I'm still receiving this error after trying all 3 options. My package-lock.json has react-devtools version 4.13.4, same as the one in the debugger. Then i run npx react-native run-android, and I get the 'Unsupported' error.
To clarify, does the backend version(react native renderer) rely on the frontend version(react native debugger)? Because having to update the dependencies of production code to work with the debugger seems wrong...

Is there any way to manually set the frontend version being used by RN Debugger?

Arkan4ik · 2021-06-09T06:30:09Z

@jack-ayoka I can describe what I did.

in your package json add resolution

yarn/npm install - it will change in yarn.lock/package-lock file version of react-dev-core
install globally react-devtools if you don't have
paste command from RN debugger which you receive in terminal and execute.

jack-ayoka · 2021-06-09T14:49:06Z

@jack-ayoka I can describe what I did.

in your package json add resolution

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

install globally react-devtools if you don't have

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.

vishnuc · 2021-07-07T08:55:05Z

I have referred the documentation , but its the same issue

10n37 · 2021-07-07T09:01:57Z

I have referred the documentation , but its the same issue

if you use npm, delete package.lock and install again with yarn, it helps me..

vishnuc · 2021-07-07T09:27:47Z

I use npm , for some reasons my expo project breaks if i run yarn.. so any solutions with NPM ?

0x0a0d · 2021-12-27T09:58:32Z

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

anttiabel · 2022-01-05T19:16:32Z

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.

frags51 · 2022-01-11T11:29:10Z

Same for me as @anttiabel

garrettg123 · 2022-01-12T19:33:19Z

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

tam315 · 2022-01-13T01:02:52Z

I found 4.22.1 >= react-devtools-core doesn't seem to be compatible with RNDebugger.

Minimal reproductive sample:
facebook/react#23035 (comment)

kidproquo · 2022-01-14T03:13:01Z

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.

mjstelly · 2022-01-21T17:31:32Z

@garrett-gottlieb I added the resolutions entry to my package.json, restarted metro bundler with --reset-cache flag, and relaunched my app. No change. Same error. Any thoughts?

bfricka · 2022-01-24T21:22:49Z

@garrett-gottlieb I added the resolutions entry to my package.json, restarted metro bundler with --reset-cache flag, and relaunched my app. No change. Same error. Any thoughts?

Did you yarn install / yarn dedupe after changing the resolutions?

Kawinesh · 2022-01-26T15:42:34Z

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)

rossjackson · 2022-01-26T16:40:06Z

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!

rossjackson · 2022-01-26T16:54:33Z

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

joey-harward · 2022-01-30T04:22:46Z

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

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

dkang23 · 2022-02-06T21:28:23Z

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

cglacet · 2022-02-08T19:51:39Z

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.

stenes90 · 2022-04-05T18:44:11Z

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

This worked for me. Tnx

jwboardman · 2022-04-29T15:13:43Z

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.

Your comment is what finally saved me! I changed my resolutions to:
"resolutions": {
"react-devtools-core": "4.14.0"
},

and the error FINALLY WENT AWAY! Thank you! The error message has to be wrong.

shawngustaw · 2022-05-09T21:49:21Z

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

This worked for me. Thank you!

alexlukelevy · 2022-05-12T17:18:06Z

For npm, simply add

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

zn7726 · 2022-05-30T04:34:23Z

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.

You asked the question that I was confused with after reading all these comments and how ppl reporting solutions are working!

the error message seemed to me mean that RND was expecting react-devtools with version <4.11 but a higher version is always used. With that impression in mind, I have been trying to link an earlier version of react-devtools-core to the app, including by adding the resolution clause in the package.json. I checked the globally installed react-devtools in yarn and npm and made sure they are all of version 4.10.4, specify the version 4.10.4 in the resolution clause and etc. but non worked. Of course those changes won't be helpful because the direction was wrong!

Once I changed the resolution section to specify the react-devtools-core to 4.14.0, ran yarn, and restarted the app, wow, all working now!

garawaa · 2022-08-06T07:25:02Z

I just edited my package.json file like below:
In first line of defendencies block added
"react-devtools": "~4.14.0",
"react-devtools-core": "~4.14.0",
For examle:

  "dependencies": {
    "react-devtools": "~4.14.0",
    "react-devtools-core": "~4.14.0",
    "react": "17.0.2",
    "react-native": "0.68.2"
  },

And added

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

before last code block:

  "resolutions": {
    "react-devtools-core": "4.14.0"
  },
  "jest": {
    "preset": "react-native"
  }

If you are using yarn, delete yarn.lock file and run yarn install
if you are using npm, delete package-lock.json file and run npm install
Enjoy!

karlhorky · 2022-08-08T11:34:56Z

Seems like #706 is the PR to fix this by upgrading react-devtools-core in react-native-debugger.

jhen0409 closed this as completed Jun 7, 2021

jhen0409 mentioned this issue Jul 7, 2021

Unsupported DevTools backend version - #627

Closed

frags51 mentioned this issue Jan 11, 2022

React dev tools keep saying "Unsupported version" #673

Open

MalinnaLeach mentioned this issue Feb 25, 2022

[DevTools Bug] Cannot add node "1" because a node with that id is already in the Store. facebook/react#23226

Open

rossjackson mentioned this issue Jun 26, 2022

Cannot add node "1" because a node with that id is already in the Store. #668

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Native Debugger doesn't use the global react-devtools version and still shows 'Unsupported' error #620

React Native Debugger doesn't use the global react-devtools version and still shows 'Unsupported' error #620

bogdandevlpr commented Jun 7, 2021

jhen0409 commented Jun 7, 2021

Arkan4ik commented Jun 8, 2021 •

edited

Loading

jhen0409 commented Jun 8, 2021

Arkan4ik commented Jun 8, 2021

jack-ayoka commented Jun 8, 2021

Arkan4ik commented Jun 9, 2021 •

edited

Loading

jack-ayoka commented Jun 9, 2021

vishnuc commented Jul 7, 2021

10n37 commented Jul 7, 2021

vishnuc commented Jul 7, 2021

0x0a0d commented Dec 27, 2021 •

edited

Loading

anttiabel commented Jan 5, 2022

frags51 commented Jan 11, 2022

garrettg123 commented Jan 12, 2022 •

edited

Loading

tam315 commented Jan 13, 2022

kidproquo commented Jan 14, 2022

mjstelly commented Jan 21, 2022

bfricka commented Jan 24, 2022

Kawinesh commented Jan 26, 2022

rossjackson commented Jan 26, 2022

rossjackson commented Jan 26, 2022

joey-harward commented Jan 30, 2022

dkang23 commented Feb 6, 2022

cglacet commented Feb 8, 2022

stenes90 commented Apr 5, 2022

jwboardman commented Apr 29, 2022

shawngustaw commented May 9, 2022

alexlukelevy commented May 12, 2022

zn7726 commented May 30, 2022

garawaa commented Aug 6, 2022

karlhorky commented Aug 8, 2022

React Native Debugger doesn't use the global react-devtools version and still shows 'Unsupported' error #620

React Native Debugger doesn't use the global react-devtools version and still shows 'Unsupported' error #620

Comments

bogdandevlpr commented Jun 7, 2021

jhen0409 commented Jun 7, 2021

Note about React DevTools

Question: I got Unsupported meesage from React DevTools

Arkan4ik commented Jun 8, 2021 • edited Loading

jhen0409 commented Jun 8, 2021

Arkan4ik commented Jun 8, 2021

jack-ayoka commented Jun 8, 2021

Arkan4ik commented Jun 9, 2021 • edited Loading

jack-ayoka commented Jun 9, 2021

vishnuc commented Jul 7, 2021

10n37 commented Jul 7, 2021

vishnuc commented Jul 7, 2021

0x0a0d commented Dec 27, 2021 • edited Loading

anttiabel commented Jan 5, 2022

frags51 commented Jan 11, 2022

garrettg123 commented Jan 12, 2022 • edited Loading

tam315 commented Jan 13, 2022

kidproquo commented Jan 14, 2022

mjstelly commented Jan 21, 2022

bfricka commented Jan 24, 2022

Kawinesh commented Jan 26, 2022

rossjackson commented Jan 26, 2022

rossjackson commented Jan 26, 2022

joey-harward commented Jan 30, 2022

dkang23 commented Feb 6, 2022

cglacet commented Feb 8, 2022

stenes90 commented Apr 5, 2022

jwboardman commented Apr 29, 2022

shawngustaw commented May 9, 2022

alexlukelevy commented May 12, 2022

zn7726 commented May 30, 2022

garawaa commented Aug 6, 2022

karlhorky commented Aug 8, 2022

Question: I got `Unsupported` meesage from React DevTools

Arkan4ik commented Jun 8, 2021 •

edited

Loading

Arkan4ik commented Jun 9, 2021 •

edited

Loading

0x0a0d commented Dec 27, 2021 •

edited

Loading

garrettg123 commented Jan 12, 2022 •

edited

Loading