Flipper: Unsupported DevTools backend version

[archcorsair]

🐛 Bug Report

After upgrading to 0.87.0 (50.0.0) I get the below error when opening DevTools (I'm unsure why it is using an older version that is not found on my system)

DevTools is working fine standalone [email protected]

Pressing click here for more information brings up an internal login dialog

To Reproduce

Upgrade to Flipper 0.87.0
Attempt to open React DevTools
Becomes non-interactable
Following the suggestion to run npm i -g react-devtools@^4.13.0 does not solve the problem.

Environment

RN 0.64
Flipper 0.87.0 (50.0.0)
MacOS 11.2.3
Hermes Enabled
Standalone [email protected]

> npm -g list --depth 0 | grep react-devtools
├── [email protected]

[mweststrate]

We are releasing an update Flipper version with the new dev-tools next week (it is embedded, so the global update won't work). In the mean time you could temporarily downgrade the version used in your project (it will still be compatible with RN) by adding this to your package.json.

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

(If 4.10.3 doesn't work pick 4.10.2)

UPDATE

Should be 4.13.2 now.

[tolidevs]

I have a similar issue, first time using Flipper but have just downloaded version 0.88.0

I'm getting the same issue in reverse, it is telling me my devtools version is incorrect (too new) and needs downgrading:

I've followed the suggested steps and receive the following error:

➜  ~ npm install -g react-devtools@<4.11.0        
zsh: no such file or directory: 4.11.0

I have tried uninstalling react-devtools altogether and running the above command and received the same error.

Also tried uninstalling and installing with the commands

npm install -g [email protected]

and

npm install -g react-devtools@^4.11.0

but none of these have worked, and I am always receiving the same error stating that my detools version is 4.13.0

I'm not using yarn so am unable to use the resolutions solution provided above.

Environment
RN 0.64
Flipper 0.88.0
MacOS big sur 11.3.1

[mweststrate]

I'm not using yarn so am unable to use the resolutions solution provided above.

In that case I'd recommend to stick to an older version of Flipper now.

Alternatively a solution for this problem could be to load the react-devtools from the global npm path, rather than using the embedded version. Maybe it can be useful to PR a toggle button in the plugin for that? The plugin sources can be found here: https://github.com/facebook/flipper/tree/master/desktop/plugins/public/reactdevtools

[archcorsair]

@tolidevs
Since you are using zsh, your command is failing because you need to wrap the package name with quotes:

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

[sezginriggs]

I'm having the same problem too on Windows 10. I get the following error and tried to install <4.11.0 globally but didn't help and still getting the popup.

[mweststrate]

The next release will support switching between the embedded and globally installed version of the react-devtools, so that Flipper can be compatible with multiple versions of React Native

[mweststrate]

Released as 0.89

[mweststrate]

Please use instructions and toggle as shown above and otherwise open a new
issue with details.

On Sun, 16 May 2021, 20:44 Rohit Chaubey, @.*> wrote:

still an issue with 0.90.2

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/flipper/issues/2250#issuecomment-841867349,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAN4NBAYP2ZQ3KLLVRY32TDTOAOBBANCNFSM435WHPJQ
.

[leotm]

• npm i -g "react-devtools@<4.11.0" works for me
• yarn global add [email protected] doesn't

---

Was getting this at first (Retry no good):

Looks like the process was hanging around from checking redux-devtools via terminal, even after restarting machine (couldn't spot in _Activity Monitor_).

So just kill port ur fave way like:

lsof -i tcp:8087

It works, but can still be buggy still showing the msg:

Restarting Flipper at this point does the job:

---

Locking the embedded BE in RN to the same version as the FE with Yarn doesn't surface to Flipper for me:

"resolutions": {
  "react-devtools-core": "4.x.x"
}

Seems to still ignore yarn.lock

[thisisgit]

This may be a separate issue but just wanna verify first if this is only happening to me.

Does clicking on View Settings(see the image below) work with Use globally installed DevTools enabled?

The settings popup won't open when I enable that Use globally installed DevTools but if it's disabled, the popup opens just fine but the problem is that the Unsupported DevTolls backend version pops up in few seconds.
The version for global devtools is 4.10.3 and using Flipper 0.91.2

Can anyone confirm the same issue as mine?

[bartzy]

The next release will support switching between the embedded and globally installed version of the react-devtools, so that Flipper can be compatible with multiple versions of React Native

After installing [email protected] through npm i -g react-devtools@<4.11.0, toggling that switch in the image doesn't do anything. I still get react-devtools 4.13.

[sasmit]

adding below in my projecy package.json helped me a lot
"resolutions": {
"react-devtools-core": "4.13.0"
}