Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React DevTools: Unsupported backend version

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:

Dialog displaying downgrade instructions for the React DevTools frontend to connect to an older backend version

Dialog displaying upgrade instructions for the React DevTools frontend to connect to a newer backend version

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

react-devtools-core@4.10.0
node_modules/react-devtools-core
  react-devtools-core@"4.10.0" from react-devtools@4.10.0
  node_modules/react-devtools
    react-devtools@"4.10.0" from the root project

react-devtools-core@4.12.4
node_modules/react-native/node_modules/react-devtools-core
  react-devtools-core@"^4.6.0" from react-native@0.63.2
  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 react-native-safe-area-context@3.2.0
    node_modules/react-native-safe-area-context
      react-native-safe-area-context@"3.2.0" from expo@41.0.1
      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/cli@4.14.0
    node_modules/@react-native-community/cli
      @react-native-community/cli@"^4.14.0" from react-native@0.63.2

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 react-devtools@4.12.4 

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:

Dialog displaying downgrade instructions for the React DevTools frontend to connect to an older backend version

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:

Dialog displaying downgrade instructions for the React DevTools frontend to connect to an older backend version

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

This comment has been minimized.

Copy link

@RewriteH RewriteH commented Jul 7, 2021

man, npm i -g react-devtools@<4.11.0 is wrong way
when i try npm i -g react-devtools@<4.11.0 in cmd it's throw error that can't find file

@bvaughn

This comment has been minimized.

Copy link
Owner Author

@bvaughn bvaughn commented Jul 7, 2021

@RewriteH Add quotes:

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

This comment has been minimized.

Copy link

@Ravid-anywhere Ravid-anywhere commented Jul 8, 2021

I am also getting
npm ERR! HTTPError: Response code 404 (Not Found) for https://github.com/electron/electron/releases/download/v9.4.4/electron-v9.4.4-darwin-arm64.zip

When trying both:
npm i -g react-devtools@<4.11.0
and
npm i -g react-devtools@"<4.11.0"

@badal897

This comment has been minimized.

Copy link

@badal897 badal897 commented Jul 8, 2021

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"

@badal897

This comment has been minimized.

Copy link

@badal897 badal897 commented Jul 8, 2021

@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"

@xbaldiq

This comment has been minimized.

Copy link

@xbaldiq xbaldiq commented Aug 5, 2021

@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

This comment has been minimized.

Copy link

@RewriteH RewriteH commented Aug 5, 2021

@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

@mcAnastasiou

This comment has been minimized.

Copy link

@mcAnastasiou mcAnastasiou commented Aug 17, 2021

I had the same issue with m1. Just add
yarn add -D react-devtools-core@4.13.0 where 4.13.0 is the version that the message displays

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment