Skip to content

Instantly share code, notes, and snippets.

@bvaughn

bvaughn/devtools-bridge-protocol.md

Last active October 13, 2022 18:34
Show Gist options
  • Save bvaughn/4bc90775530873fdf8e7ade4a039e579 to your computer and use it in GitHub Desktop.
Save bvaughn/4bc90775530873fdf8e7ade4a039e579 to your computer and use it in GitHub Desktop.
Download ZIP
React DevTools: Unsupported backend version
Raw
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:

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.

@shivam-nft
Copy link

@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

@n-devr
Copy link

n-devr commented Apr 1, 2022

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

@vladanyes
Copy link

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

@johannesklaasen
Copy link

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

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

@deathemperor
Copy link

deathemperor commented Apr 21, 2022 •
edited

@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

@pavelgronsky
Copy link

pavelgronsky commented May 11, 2022 •
edited

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

  1. Run npm install
  2. 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!!!)
  3. npm install
  4. Check dependencies by npm explain react-devtools-core
    I get something like this:
$ npm explain react-devtools-core
react-devtools-core@4.14.0
node_modules/react-devtools-core
  react-devtools-core@"4.14.0" from react-native@0.68.1
  node_modules/react-native
    react-native@"0.68.1" from the root project
  1. Restart Emulator Android
  2. 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"
    }
  },

@qiqiliang1996
Copy link

qiqiliang1996 commented May 21, 2022 •
edited

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)

react-devtools-core@4.24.1 node_modules/react-devtools-core
react-devtools-core@"~4.14.0" from the root project
react-devtools-core@"^4.6.0" from react-native@0.64.3 node_modules/react-native
react-native@"0.64.3" from the root project

  1. 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)
  2. All I have to do is run --> npm i -d react-devtools@4.24.1
  3. I hope my solution helped you !

@mirek11s
Copy link

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

@NoelBq
Copy link

NoelBq commented Jul 18, 2022

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 !!

@steenhansen
Copy link

steenhansen commented Aug 2, 2022 •
edited

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
+-- corepack@0.10.0
+-- eas-cli@0.57.0
+-- expo-cli@6.0.1
+-- npm@8.11.0
`-- yarn@1.22.19

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

@mateuszbaszaraba
Copy link

If you are struggling with this error
image

--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:

├── corepack@x.x.x
├── expo-cli@y.y.y
└── npm@z.z.z

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

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