[DevTools Bug]: React Devtools on Firefox initially shows an empty (blank) component tree

[saiyerniakhil]

Website or app

https://reactjs.org/

Repro steps

1. Go to any site built with React.js
2. Open the React Devtools from the firefox developer tools window.
3. There will be an empty component when Components tab is selected
4. Now refresh the page to see the component tree getting populated inside the Components tab.

Windows Version - Windows 10 21H1
Firefox Version - v90.0.2 (64-bit)

Attaching a GIF of the issue while visiting reactjs.org -

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[kevinashworth]

I see this problem very frequently. Open and close a handful of times (option-command-I) and eventually I see the component tree.

I'm using latest builds of Firefox and Firefox Developer Edition on macOS Big Sur 11.5.1

[secretpwner]

Here's a same problem. I thought it was my own error, but I think it's a bug

[mbonaci]

On Chrome too.

[kevinashworth]

As a workaround, I am using an old version of DevTools, one from early 2021, 4.10.1, with updates turned off. It works just fine.

[QuentinLuc]

I've got the same issue on Chrome and when the components tree finally shows up, it's cropped on the left:

[jstejada]

@QuentinLuc I think that the issue you are reporting of the component tree being cropped to the left seems like a different issue to the one reported here. The cropping issue seems to be the same as #22065 or #21986

probably better to continue the conversation about the cropping issue there, and keep this one about the component tree not showing up on initial load

[nghtstr]

@saiyerniakhil What was the workaround that you used to see the components finally?

[saiyerniakhil]

@nghtstr I hit refresh as a quick workaround but mostly I use chrome when I need to debug something using react devtools, which is really annoying as my default browser is Firefox.

[bvaughn]

I may have fixed this issue too via #22083. Could someone verify?

[saiyerniakhil]

I couldn't reproduce this issue anymore from the past few days, can anyone confirm?

[kevinashworth]

I used to see this multiple times per day, but I haven't see a blank tree since the latest update.

[sshquack]

Verified that the tree renders on first launch. Here is my config:

• Firefox 95.0 (64-bit)
• React dev tools 4.21.0
• macOS monterey 12.0.1 (M1 Apple silicon)

[isabelacmor]

I'm in a state where I can't get the component tree to show up at all in Chrome or Edge.

I'm on Windows 11, Edge Version 97.0.1072.69 (Official build) (64-bit), Chrome Version 97.0.4692.99 (Official Build) (64-bit), React DevTools Version 4.23.0.

I've restarted my machine, restarted my browsers, cleared my browser history/cache/cookies, tried incognito mode, uninstalled and reinstalled React DevTools, trying an older version of React DevTools (4.17.0), and uninstalled and reinstalled Chrome with no luck.