DevTools can't load Components tree in Components Tab

[jstejada]

Summary

There's a mix of several different issues that result in the Components tree not being able to load, which happens inconsistently.

In some cases, after trying out a different build of DevTools with a potential fix, the issue seems to fully resolve itself, even after going back to using the "bad" build where the issue originally occurred. However, that doesn't mean the issue is fixed by that build, since other reports keep occurring.

This issue is a master task tracking all of the issues we've seen so far from user reports:

• Cannot add node "x" because a node with that id is already in the store, reported in [DevTools Bug] Cannot add node "476" because a node with that id is already in the Store. #21636 before we shipped v4.20.0.
• No location name for view with id <id_of_components _tab>, reported in the console inspecting DevTools itself.
  
• Invalid renderer id "1", logged in the console of the main page
  
• Unable to find React on the page., which suggests that the extension failed to load entirely as that's just placeholder text from before the extension panels are created with Chrome.
  
• Uncaught error: Extension Context Invalidated, reported in [DevTools Bug]: Blank tools localhost only #22577.
  https://user-images.githubusercontent.com/7581546/137986963-f55b9fc2-745d-4aeb-8b8b-49645197c163.png
• Navigating to a new tab doesn't load Components tree (even after v4.21.0 w duplicate extension logic reverted). See Navigating to a new tab with DevTools open does not load Components tree #22663 for details

• No error being shown at all, as also reported in [DevTools Bug]: Blank tools localhost only #22577.

---

Root Cause and Fixes

• The suspected root cause is the changes shipped in v4.20.0 for detecting duplicate installations of DevTools.
• A fix was attempted with v.4.20.2, based on reports from users in DevTools can't load Components tree in Components Tab #22636 confirming that our changes in Dev Tools: Relax constraint on passing extensionId for backend init #22597 fixed the issue
• The logic is now being fully reverted in Revert logic for checking for duplicate installations of DevTools #22638

[dawang021]

I seem to be having same issue, Component tree is no longer loaded recently....

[metalheadcode]

I seem to be having same issue, Component tree is no longer loaded recently....

did you manage to resolve them?

[ShaileshParmar11]

I seem to be having same issue, Component tree is no longer loaded recently....

have you found the fix? I am facing a similar issue.

[jstejada]

We think #22638 should fix this and we're shipping a fix soon

[jstejada]

#22663 is another instance of this

[jstejada]

We're shipping another version v4.21.0 to the web store which we think should address this (or reduce the amount of times it triggers #21636). It should be available in chrome in a few days.

[jstejada]

FYI v4.21.0 is now on Chrome Web Store which should resolve or at least reduce most occurrences of this issue (see #22577).

I will keep this issue open as a way to track all of the ways in which this issue might still occur, since #2257 was just one of the ways in which it was occurring fairly frequently.

The root cause of of #21636 is still undetermined and needs investigation

[jstejada]

@aalices, when this happens to you, do you see any errors in the console? cc @bvaughn

[aalices]

I can see a warning Could not find Fiber with id "6"
I just generated a basic App with CRA and added a logic that renders a new child component after few seconds and everything works fine. So looks like it works for some apps running locally

[yume-chan]

I still sometimes see Unable to find React on the page. DevTools of DevTools print this error message when this happens:

Uncaught DOMException: Blocked a frame with origin "chrome-extension://gpphkfbcpidddadnkolkpfckpihlkkil" from accessing a cross-origin frame.
    at chrome-extension://gpphkfbcpidddadnkolkpfckpihlkkil/build/main.js:54748:43
    at Object._fire (<anonymous>:1:2276)
    at Object._customDispatch (<anonymous>:1:882)
    at Object._dispatch (<anonymous>:1:2375)
    at F._onMessage (<anonymous>:1:11280)

Switching between Components and Profiler tabs multiple times sometimes mitigates this problem.

Microsoft Edge 102.0.1227.0 (Official build) dev (64-bit)
React Developer Tools : 4.24.3 (3/30/2022)