Skip to content
This repository has been archived by the owner on Nov 22, 2024. It is now read-only.

React Native: Unable to inspect contents in React Dev Tools/Layout Inspector #2224

Closed
micnguyen opened this issue Apr 26, 2021 · 2 comments
Closed

Comments

@micnguyen
Copy link

micnguyen commented Apr 26, 2021

🐛 Bug Report

  • When I start a bare React Native project and I select the React Dev Tools, whenever I select an element, it stays as Loading forever on the side panel:

Screen Shot 2021-04-26 at 10 00 50 pm

and in the app I get this error:
Screen Shot 2021-04-26 at 9 32 46 pm

To Reproduce

  • Start brand new React Native Project
  • Open Flipper
  • Select React Dev Tool and select a Text element to change
  • View iPhone Simulator and it has the error

Environment

iOS: 14.4
macOS: 11.2.3
"react": "17.0.1",
"react-native": "0.64.0"
Flipper: 0.86.0

@mweststrate
Copy link
Contributor

This means the react-devtools-core is out of sync with the DevTools in Flipper. This has recently been addressed in facebook/react#21331

But in the mean time you an address the issue by specifying which version of the devtools are needed in your package.json, for example (the version used in Flipper is shown at the top of the plugin):

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

@mweststrate
Copy link
Contributor

The next version of Flipper will support connecting to the React DevTools of older versions.

facebook-github-bot pushed a commit that referenced this issue May 12, 2021
Summary:
Currently Flipper embeds the React devTools, and as a result the version of the React devTools is strictly coupled to the Flipper version. This is troublesome when connecting to (slightly) older React Native versions, that use a different version of the tools. That results in errors like this one:

{F615263497}

This diff introduces a feature to use globally installed devTools instead of the embedded ones, giving users the flexibility to pick their own version.

{F615263580}

This addresses

https://fb.workplace.com/groups/flippersupport/permalink/1125669971246993/
#2250
#2224

Changelog: [React DevTools] It is now possible to switch between the embedded and globally installed version of the React DevTools. This will enable the React DevTools to connect to older RN versions. Fixes #2250, #2224

Reviewed By: passy

Differential Revision: D28382586

fbshipit-source-id: a5386a5043933acda5aab2db74078bf7ceb105ca
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants