React: "DevTools v4 is incompatible with this version of React" with React Native & latest version of React

[kaitlynbrown]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
After starting react-devtools, I get the following error message:

DevTools v4 is incompatible with this version of React
Either upgrade React or install React DevTools v3:

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

• Use expo cli to initialize an expo app
• run yarn add react@latest to ensure the most recent version of React is installed (currently v16.11.0)
• run yarn add react-devtools to install react-devtools
• run yarn start to start the app
• run npx react-devtools to open react-devtools

What is the expected behavior?
react-devtools should work with React Native and the latest version of React

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.11.0
React Native 0.59.3
Fedora 30

[umairrafiq1133]

I installed latest react-native cli and react-devtools today.
Facing the same issue.

react-native-cli: 2.0.1
react-native: 0.61.3

Do I need to downgrade devtools?

[bvaughn]

The problem is React Native v59. DevTools v4 support was added to React Native v61. If you're using an older version, you'll have to use v3 of DevTools.

The wording is perhaps a little misleading in that it's actually the renderer/reconciler version that matters, not literally "react" the NPM package. I'm was not sure of better wording though that wouldn't just be confusing. Sorry about that :)

[a-c-sreedhar-reddy]

I use react native v0.61.3. Even then I am shown this error.

DevTools v4 is incompatible with this version of React
Either upgrade React or install React DevTools v3:

npm install -d react-devtools@^3

[bvaughn]

Doesn't sound right. That message is only shown if the DevTools frontend gets a message that the _only_ the v3 backend sends:
https://github.com/facebook/react/blob/273679a78ca0e3561ad3eaac1349187aff8548ab/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js#L26-L31

Seems to me like you've got an older version of React Native (which embeds the v3 backend) running.

[a-c-sreedhar-reddy]

package.json in my project contains

    "react-native": "0.61.3",
    "react": "16.9.0",

I uninstalled node_modules and deleted package-lock.json and installed again.
Installed devtools 4.2.0 globally.
The same error exist.

@umairrafiq1133 also uses 0.61.3

[bvaughn]

The version in the package.json may not be the version that's being installed in the node_modules folder, or something else may be causing the wrong DevTools backend version to be pulled in.

What do you see if you run

npm view react-devtools-core version

[a-c-sreedhar-reddy]

4.2.0

[PriR]

Same issue here with 4.2.0 react-devtools.
react-native-cli: 2.0.1
react-native: 0.61.3

[bvaughn]

I think this might benefit from having someone whose more plugged into the React Native ecosystem take a look. I'm not sure what else might be triggering that old backend message, but something seems to be or the error wouldn't be showing.

[telmen]

same issue

[umairrafiq1133]

I had to downgrade react-devtools version.
On new react-devtools page, they have documented that latest version wouldn't work with react 0.61.3 but thats really annoying to release something which is not compatible with current version but the version to come.

react-native

0-0.61: Not supported
0.62: Will be supported (when 0.62 is released)

Here's the source.
https://reactjs.org/blog/2019/08/15/new-react-devtools.html

[a-c-sreedhar-reddy]

@umairrafiq1133 how did you down grade

[umairrafiq1133]

@a-c-sreedhar-reddy First I tried to run
npm install -d react-devtools@^3

but that was giving an error so I had to uninstall and reinstall.
npm uninstall -g react-devtools
npm install -g react-devtools@^3

[bvaughn]

I'm sorry folks. This confusion above was due to my misremembering which version of RN started using the new backend. It was version 62, not 61, as the React docs say. The React docs also show you how to downgrade to the previous version of DevTools if you're using an older version of React Native.

but thats really annoying to release something which is not compatible with current version but the version to come.

I understand this frustration, but DevTools is used by a lot of people that _aren't_ React Native developers too. For example, the new package is used by web developers working with Safari, Code Sandbox users (since the new DevTools is embedded in the Code Sandbox IDE), and Chrome/Firefox users.

[qq282126990]

i am in react-native": "0.61.3 use react-devtools@^3 is ok and use react-devtools-core custom port 8081

import { connectToDevTools } from 'react-devtools-core';
connectToDevTools({
    port: '8081'
});

[a-c-sreedhar-reddy]

@umairrafiq1133
I downgraded but when I run react-devtools I get

───────────────────────────────────────────╮
│ │
│ Update available 3.6.3 → 4.2.0 │
│ Run npm i -g react-devtools to update │
│

[nikolowry]

On modern Linux desktops (ArchLinux), running [email protected] ends in a core dump with __libc_start_main (libc.so.6) in its stack trace.

If this feature has already landed in react-native's master branch, is there any reason react-native can't cherry-pick it and release a new v0.61 patch bump? Not trying to waste hours building an out-dated legacy Electron from source or installing react-native's master branch via npm.

[a-c-sreedhar-reddy]

@umairrafiq1133 @bvaughn can you take a look at this issue #17361

[alexleokyky]

I'm afraid that new devtools support react-native starting from 0.62(that not released yet)
Proof: react and react-native versions that react-devtools@^4 supports

[buddhikaranaweera]

I have removed devtools using
npm uninstall -g react-devtools
npm install -g react-devtools@^3.

But still getting the same message

[a-c-sreedhar-reddy]

@buddhikaranaweera
In your project
yarn add react-devtools@^3 --dev
then add "devtools": "react-devtools" to script in package.json
and try yarn devtools.

BOOM....

[buddhikaranaweera]

@a-c-sreedhar-reddy , same :(

[a-c-sreedhar-reddy]

@buddhikaranaweera its working for me now. But I dont think there is any use with v3 profiler.
Because it crashes suddenly and I dont think it support hooks. It could be used for profiling.

[yhonatan25]

The same issue with:
react: 16.13.0
react-native: 0.61.5
react-devtools: 4.5.0

[riccardolardi]

Any update on this? No way to use react-devtools with current react-native sdk?

[exotexot]

I'd also be interested in this.

[a-c-sreedhar-reddy]

Need to wait until 0.62 Release.

[gaearon]

react-devtools@3 is compatible with React Native 0.61 and earlier.

react-devtools@4 is compatible with React Native 0.62 and later.

React Native 0.62 will be released soon.

Locking this thread to prevent more confusion.