Flipper: Question: I can't use react devtools

[jb9229]

hello

i want to use react devtools plugin, but it is not working

Env:

1. react: 16.12.0, 16.9.0(this version is same issue)
2. FLIPPER_VERSION=0.23.4

Issue Image:

I tried

1. yarn add --dev react-devtools@^3
2. npm install -g react-devtools@^3

But i got same problem.

how can i solve the issue?

[mweststrate]

Can you give a bit more context? The plugin can at the moment (afaik) only connect to DevTools v4 based applications. What are you connecting to? React Native? You might need to be on a newer version to get support from this plugin.

[jb9229]

@mweststrate

Yes I connected to react-native on flipper.

I tried it on two projects, but both didn't work.(android flipper)

• I was following along that guide

First Project:

• "react-native": "0.61.2"

  Second Project

• expo eject project

[sanohin]

@mweststrate the same for my project. React devtools are not working, the error message is the same as on screenshot, I tried installing react-devtools@^3 in the project and globally but it didn't help. I guess, react-devtools is bundled with flipper.
It would be nice to find some workaround for that.

Flipper Version 0.31.1 (0.31.1)

[mweststrate]

Our next weeks release will contain a bunch of improvements in the react-devtools setup. But if you have a small test repo I can test it against, I can check if it solves your specific case.

[sanohin]

Unfortunately, my current project is not open source. Package versions:
react-native: 0.60.4
react: 16.8.6
I also tried updating to react 16.12.0 and it didn't make any change.

[sanohin]

@mweststrate I've just set up a project with create-react-native-app and configured flipper according to flipper documentation. I've set up Android only as I had some issues with setting up iOS (build errors). So anyways, the Android version doesn't work with react-devtools right now.

Test repo:
https://github.com/sanohin/flipper-demo

[mweststrate]

We just released Flipper 0.31.2, this should have the React devtools working more stable against RN 0.61

[mweststrate]

Apologies, missed this one! So far thought the issue was the React version, but it is about the React Native version: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#which-versions-of-react-are-supported. React Native 0.62 is around the corner though, so hopefully this will be fixed soon! (currently we cannot ship a separate version of the plugin for older versions, we are decoupling that as well atm, so that that will be possible in the future)

[sanohin]

@mweststrate ls that possible to define a custom version of react-devtools? For some projects, it may be not so quick and easy to migrate React Native version

[mweststrate]

@sanohin just tried, and that is quite easy to achieve if you change "react-devtools-core" to version "3.6.3" in src/plugins/reactdevtools, and then run yarn once inside that directory. After that they worked OOTB for me:

[mweststrate]

Closing as a workaround is available and a fix is in the release pipeline. Let us know if the work around doesn't suffice

[jb9229]

@mweststrate

Thank you for your help.

Where does 'src/plugins/reactdevtools' mean?
Is it in 'react-devtools npm global package directory'??

[mweststrate]

Apologies, that was assuming you run Flipper from source (clone this repo, yarn && yarn start). For the pre-built package we don't have a work around at this moment

[usrbowe]

Published plugin for those on older version of React Native -> https://github.com/facebook/flipper/issues/945