React DevTools: Unsupported backend version

devtools-bridge-protocol.md

Unsupported DevTools backend version

This page contains instructions for updating a local React DevTools application to match a version embedded in a renderer such as React Native. Instructions below cover NPM, Flipper, and React Native Debugger. If you use React DevTools in a different way, please let us know.

If you are viewing this page, you have likely seen one of the dialogs below:

These dialogs indicate that the version of the React DevTools UI you are using has connected to an incompatible version of the DevTools "backend" (generally embedded into a renderer like React Native). The fix for this is to upgrade or downgrade the version of React DevTools UI that you're using. Below are instructions for several common ways of doing this.

Global NPM install

If you have React DevTools installed globally, you can update it by copying and running the NPM command shown in the error dialog. For example, to downgrade DevTools for an older backend:

npm i -g react-devtools@"<4.11.0"

Or to upgrade it for a newer backend:

npm i -g react-devtools@^4.13.0

Local NPM install

If you have React DevTools installed locally, the best thing to do is to pin it to use the same version as React Native. The npm explain command can tell you which version that is. For example:

$ npm explain react-devtools-core

[email protected]
node_modules/react-devtools-core
  react-devtools-core@"4.10.0" from [email protected]
  node_modules/react-devtools
    react-devtools@"4.10.0" from the root project

[email protected]
node_modules/react-native/node_modules/react-devtools-core
  react-devtools-core@"^4.6.0" from [email protected]
  node_modules/react-native
    react-native@"https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz" from the root project
    peer react-native@"*" from [email protected]
    node_modules/react-native-safe-area-context
      react-native-safe-area-context@"3.2.0" from [email protected]
      node_modules/expo
        expo@"~41.0.1" from the root project
    peer react-native@">=0.62.0-rc.0 <0.64.0" from @react-native-community/[email protected]
    node_modules/@react-native-community/cli
      @react-native-community/cli@"^4.14.0" from [email protected]

The DevTools "backend" embedded in React Native example above comes from react-devtools-core version 4.12.4 but the DevTools "frontend" comes from version 4.10.0. These versions are incompatible. To fix this, either upgrade the react-devtools dependency to the same version:

npm i -d [email protected] 

Or if you a Yarn user, you could use a "resolution" to ensure that both versions resolve to the same backend:

"resolutions": {
  "react-devtools-core": "4.12.4"
}

Flipper

Flipper embeds a specific version of React DevTools (typically the latest version). The exact version will be shown in the error dialog. For example, the dialog below shows version 4.12.4:

We recommend locking the embedded backend in React Native to the same version as the frontend using a Yarn "resolution":

"resolutions": {
  "react-devtools-core": "4.12.4"
}

If this approach does not work, please open an issue in the Flipper repository to explain your setup.

React Native Debugger

The React Native Debugger embeds a specific version of React DevTools (typically the latest version). The exact version will be shown in the error dialog. For example, the dialog below shows version 4.12.4:

We recommend locking the embedded backend in React Native to the same version as the frontend using a Yarn "resolution":

"resolutions": {
  "react-devtools-core": "4.12.4"
}

If this approach does not work, please open an issue in the React Native Debugger repository to explain your setup.

Something else

If you use React DevTools in a way that was not covered above, please let us know.

@RewriteH Add quotes:

npm i -g react-devtools@"<4.11.0"

Can someone please tell how to use resolutions ? I am macbook pro m1 and when I hit the command ->
npm i -g react-devtools@"<4.11.0"

It gives the following error
HTTPError: Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v9.4.4/electron-v9.4.4-darwin-arm64.zip

What I tried is I downloaded the react devtools 4.10.1 in my local system and tried install it using
npm i -g 'path to downloaded repo'

Then I installed react-native-debugger and then again got the same issue.

Unsupported DevTools backend version
You are running react-devtools version 4.13.4-51ebccc374.
This requires bridge protocol version 1. However the current backend version uses bridge protocol version 0.

To fix this, downgrade the DevTools NPM package:
npm i -g react-devtools@"<4.11.0"

@RewriteH Add quotes:

npm i -g react-devtools@"<4.11.0"

Can someone please tell how to use resolutions ? I am macbook pro m1 and when I hit the command ->
npm i -g react-devtools@"<4.11.0"

It gives the following error
HTTPError: Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v9.4.4/electron-v9.4.4-darwin-arm64.zip

What I tried is I downloaded the react devtools 4.10.1 in my local system and tried install it using
npm i -g 'path to downloaded repo'

Then I installed react-native-debugger and then again got the same issue.

Unsupported DevTools backend version You are running react-devtools version 4.13.4-51ebccc374. This requires bridge protocol version 1. However the current backend version uses bridge protocol version 0.

To fix this, downgrade the DevTools NPM package:
npm i -g react-devtools@"<4.11.0"

have you solve it yet? i'am using m1 and have the same response

@RewriteH Add quotes:

npm i -g react-devtools@"<4.11.0"

Can someone please tell how to use resolutions ? I am macbook pro m1 and when I hit the command ->
npm i -g react-devtools@"<4.11.0"
It gives the following error
HTTPError: Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v9.4.4/electron-v9.4.4-darwin-arm64.zip
What I tried is I downloaded the react devtools 4.10.1 in my local system and tried install it using
npm i -g 'path to downloaded repo'
Then I installed react-native-debugger and then again got the same issue.
Unsupported DevTools backend version You are running react-devtools version 4.13.4-51ebccc374. This requires bridge protocol version 1. However the current backend version uses bridge protocol version 0.
To fix this, downgrade the DevTools NPM package:
npm i -g react-devtools@"<4.11.0"

have you solve it yet? i'am using m1 and have the same response

i have used yarn and am followed this instructions to solve this

I had the same issue with m1. Just add
yarn add -D [email protected] where 4.13.0 is the version that the message displays

I still saw the same error message after following these instructions. It's related to a bug where opening the dev menu breaks connection with react-devtools. The workaround is to toggle the element inspector without first opening the dev menu. I documented the steps here:

https://gist.github.com/sschottler/7771dc034d38b89d9d587dc5d358c386

Is [email protected] supported?

getting this same issue

• can't upgrade React Native version due to using Expo project for work

• downloaded the developer tools using homebrew

• tried deleting and following the npm -g instructions but ended up getting a whole new error about electron that didn't go anywhere

• also can't use yarn for project or company

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.

jhen0409/react-native-debugger#620 (comment)

Solution for npm user: Update npm to the latest version. Then, install the corresponding version of react-devtools-core to the project.
Note: I have the same problem as @anttiabel when using react native debugger. So in my case, the version I install is 4.14.0 (not 4.22.1).

@anttiabel @giangpro93 I have exactly the same problem (I am on windows) and nothing works (upgrading globally, etc.). Did you find something else? Thanks a lot!

@afilp As I said, I install it in the project I'm working on. Don't upgrade it globally, it doesn't change anything. Find the version of the devtools that RN Debugger is using and install the exact version of react-devtools-core to the project you are working on.

@giangpro93 Thank you. Yes, I tried this approach but I did not any difference.

This is the version I have in devtools:

So I added this in package.json:
"react-devtools-core": "4.14.0"

I did yarn, then run start.
I closed devtools and reopened it (it is a standalone EXE in Windows).

I get the same issue, what do I miss in the process maybe?

Thank you!

I wasn't able to get it to work by using the npm global install OR by using yarn resolutions.. I found that downgrading react-native-debugger worked for me. Not the best solution but worked for me - hope this helps someone else.

It seems like with my setup, react-native-debugger was compiled with an incompatible react-devtools-core version. So the fix for me was to downgrade to an older version of react-native-debugger that was compiled with a compatible version of react-devtools-core.

My previous setup (when it didn't work):

• use yarn for our project
• [email protected] installed to the project
• running npm explain react-devtools-core in the project dir showed that [email protected] was installed to the project
• latest react-native-debugger (as of 2022-02-04), v0.12.1 was installed using homebrew

My current setup (which is working)

• [email protected] and [email protected] installed to project, same as above
• react-native-debugger v0.11.7 was installed by downloading the pre-built binary from the releases page

I chose v0.11.7 because v0.11.8 includes [email protected], and I needed react-devtools-core@<4.11.0. Installing the pre-built binary to my Applications dir did add the terminal command.

Is the solution for npm users with RN Debugger really to use a version 4 releases out of date?

OK. After trying absolutely everything to make React Devtools work inside Flipper (latest is 0.132.0 at the time of writing) and connect to React Native (0.67.2 at the time of writing), here is how I succeeded, thanks to this guide.

Setup: I have no react-devtools manually installed, neither in global or local dependencies.

1. Downgraded Flipper to 0.131.1 because of this error in 0.132.0 that prevents doing connecting to the iOS simulator in my case. You might not need this, as it's a bit unrelated to the issue at hand.
2. In the "React Devtools" tab of Flipper, I dismiss the error Unsupported Bridge operation "0". Underneath, there is the error discussed in this post: You are running react-devtools version [x] (which is the internal version Flipper uses)
3. I add this to package.json, where the resolution of react-devtools-core is set to the one Flipper uses (minus the commit tag). The preinstall script makes it work under npm. Probably not needed under yarn.

{
  "scripts": {
    "preinstall": "npx --yes npm-force-resolutions"
  },
  "resolutions": {
    "react-devtools-core": "4.23.0"
  }
}

4. npm install, then npm ls react-devtools-core to ensure that resolutions worked. In my case, I saw errors like invalid: "4.19.1" from node_modules/react-native which is a good thing.
5. React Devtools now work in Flipper

In package.json

"resolutions": {
    "react-devtools-core": "4.23.0"
  }

In gradle.properties

# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.134.0

Also a great tip from flipper issues
For example if using Android device, we need to set port forwarding for React DevTools:

adb reverse tcp:8097 tcp:8097

Quick check

  Do not turn ON Debug / Remote JS Debugging 🚫
   Run npx react-devtools to verify if React Devtools can connect without Flipper
   Do not install React Devtools v3 if you have React Native >= 0.61
   Close any other React Devtools (standalone,...)

And it worked for me.

I've spent about 20 hours trying to resolve the unsupported backend version issue

My dependencies

I'm running an M1 macbook, have tried:

• deleting package.json and running npm install
• matching devtools-core version to devtools version
• adding the devtools-core version to my resolutions
• installing yarn and installing devtools-core version to match devtools version
• threw my computer out the window

What else can I try?

@Corey-Wademan this isn't optimal (using an outdated version), but it might help you move past your current blocker.. Seems like we're on similar versions. https://gist.github.com/bvaughn/4bc90775530873fdf8e7ade4a039e579?permalink_comment_id=4056267#gistcomment-4056267

I wasn't able to get it to work by using the npm global install OR by using yarn resolutions.. I found that downgrading react-native-debugger worked for me. Not the best solution but worked for me - hope this helps someone else.

It seems like with my setup, react-native-debugger was compiled with an incompatible react-devtools-core version. So the fix for me was to downgrade to an older version of react-native-debugger that was compiled with a compatible version of react-devtools-core.

My previous setup (when it didn't work):

• use yarn for our project
• [email protected] installed to the project
• running npm explain react-devtools-core in the project dir showed that [email protected] was installed to the project
• latest react-native-debugger (as of 2022-02-04), v0.12.1 was installed using homebrew

My current setup (which is working)

• [email protected] and [email protected] installed to project, same as above
• react-native-debugger v0.11.7 was installed by downloading the pre-built binary from the releases page

I chose v0.11.7 because v0.11.8 includes [email protected], and I needed react-devtools-core@<4.11.0. Installing the pre-built binary to my Applications dir did add the terminal command.

This worked to remove the "Unsupported Backend version" bug but now after i run react-native run-ios, I get a blank white screen. When I stop the debugger or open without connecting to debugger the app runs fine. So the issue is arising somewhere from the debugger

@Corey-Wademan Thanks!!

Instead of downloading a react-native-debugger from HomeBrew, Installing it manually from the release page solved the issue.
react-native-debugger v0.11.7

react-native-debugger v0.11.7 was installed by downloading the pre-built binary from the releases page

@Corey-Wademan Thanks!!

Instead of downloading a react-native-debugger from HomeBrew, Installing it manually from the release page solved the issue. react-native-debugger v0.11.7

react-native-debugger v0.11.7 was installed by downloading the pre-built binary from the releases page

This was the only thing that worked for me as well. I had previously installed react-native-debugger with homebrew and followed the instructions in the app itself and the suggestions on this thread. Downgrading/reinstalling countless versions of react-devtools and react-devtools-core both locally and globally did not solve the issue for me.

Uninstalling the homebrew version of react-native-debugger and installing the react-native-debugger_0.11.7.dmg binary completely resolved the issue for me.

The only thing that worked for me

Uninstalling the homebrew version of react-native-debugger and installing the react-native-debugger_0.11.7.dmg binary completely resolved the issue for me.

thanks @Corey-Wademan @n-devr @shivam-nft

I had the same issue with m1. Just add
yarn add -D [email protected] where 4.13.0 is the version that the message displays

This resolved it for me on M1....thank you @mcAnastasiou

@Corey-Wademan Thanks!!
Instead of downloading a react-native-debugger from HomeBrew, Installing it manually from the release page solved the issue. react-native-debugger v0.11.7
react-native-debugger v0.11.7 was installed by downloading the pre-built binary from the releases page

This was the only thing that worked for me as well. I had previously installed react-native-debugger with homebrew and followed the instructions in the app itself and the suggestions on this thread. Downgrading/reinstalling countless versions of react-devtools and react-devtools-core both locally and globally did not solve the issue for me.

Uninstalling the homebrew version of react-native-debugger and installing the react-native-debugger_0.11.7.dmg binary completely resolved the issue for me.

this works but now I'm getting this error described here jhen0409/react-native-debugger#584: can't inspect components

Hello everyone ;)
My solution works with the latest version react-native-debugger [v0.12.1] releases page

My current setup
0. Remove all react-devtools-core from global and local npm

1. Remove package-lock.json
2. Remove node_modules
3. Add this code to package.json

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

As you can see, the version react-devtools-core is 4.14.0, maybe another version works, but this solution works for me

4. Run npm install
5. Check dependencies by npm explain react-devtools-core
   If version react-devtools-core and react-devtools-core inside react-native is different:
   5.1. Remove react-devtools-core from node_module by rm -rf node_module/react-devtools-core
   5.2. Remove package-lock.josn
   5.3. Remove react-devtools-core package from package.json (overrides with "react-devtools-core": "4.14.0" must stay!!!)
6. npm install
7. Check dependencies by npm explain react-devtools-core
   I get something like this:

$ npm explain react-devtools-core
[email protected]
node_modules/react-devtools-core
  react-devtools-core@"4.14.0" from [email protected]
  node_modules/react-native
    react-native@"0.68.1" from the root project

8. Restart Emulator Android
9. Amazing!!!

You don't need to install react-devtools-core globaly or locally in your project
react-devtools-core version must be the same and "react-devtools-core": "4.14.0" work's for me

This is my package.json dependesies:

et": "^2.3.0",
    "@freakycoder/react-native-helpers": "^1.0.2",
    "@react-native-community/eslint-config": "^3.0.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@reduxjs/toolkit": "^1.8.1",
    "@types/react-native": "^0.67.6",
    "expo": "^45.0.0",
    "expo-constants": "~13.1.1",
    "expo-dev-client": "~0.9.5",
    "expo-linking": "~3.1.0",
    "expo-splash-screen": "~0.15.1",
    "expo-status-bar": "~1.3.0",
    "expo-updates": "^0.13.1",
    "prettier": "^2.6.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.1",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-web": "0.17.7",
    "react-redux": "^8.0.1",
    "redux": "^4.2.0",
    "typescript": "~4.3.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-redux": "^7.1.24",
    "env-cmd": "^10.1.0"
  },
  "overrides": {
    "react-native": {
        "react-devtools-core": "4.14.0"
    }
  },

Hello everyone, I fixed my problem using the following solution:

1. In your project: run --> npm explain react-devtools-core (to see your global react-devtools-core version, my version is 4.24.1)

[email protected] node_modules/react-devtools-core
react-devtools-core@"~4.14.0" from the root project
react-devtools-core@"^4.6.0" from [email protected] node_modules/react-native
react-native@"0.64.3" from the root project

3. compare global react-devtools-core version & root project react-devtools-core version (my case: my global is 4.24.1 but my root project is 4.14.0)
4. All I have to do is run --> npm i -d [email protected]
5. I hope my solution helped you !

Hello, I fixed this issue by:

1. Installing "react-devtools": "^4.14.0"
2. Then just added:
   "overrides": {
       "react-devtools-core": "4.14.0"
     }, to my package.json

Hello, I fixed this issue by:

1. Installing "react-devtools": "^4.14.0"
2. Then just added:
   "overrides": {
       "react-devtools-core": "4.14.0"
     }, to my package.json

@mirek11s this worked for me !! Thanks, you saved my afternoon !!

Using React Native Debugger 0.12.1 (github.com/jhen409) on Windows

Did NOT "npm i -g react-devtools@<4.22.0" (note 4.22.0 and 4.14.0 versions)

npm list -g
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

package.json (note "react-native/react-devtools-core" NOT "react-devtools-core")
"resolutions": {
"react-native/react-devtools-core": "4.14.0"
},
"dependencies": {
"@react-navigation/native": "^6.0.11",
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-redux": "^8.0.2",
"redux": "^4.2.0"
},

1. delete node_modules
2. "yarn install" as "npm install" does not work
3. celebrate

If you are struggling with this error

--Here is my solution--

in package.json file:

"dependencies": {
    "react-devtools": "4.14.0",
    "react-devtools-core": "4.14.0",
    ...
  },

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

I had global react-devtools-core installed (4.25.0 version) but I uninstalled it. (npm uninstall -g react-devtools-core)
Result of my npm list -g:

├── [email protected]
├── [email protected]
└── [email protected]

React Native Debugger: v0.12.1
React Native: v0.64.3