Bug: DevTools not finding/showing React components

When I use DevTools to select an element on the page, it can't jump/find it.
It also doesn't show it in the Components page.
This was checked by finding its parent and checking the children, non of the newly generated ones are there.
As a probably related bug Profiler doesn't show/record the changes.

React version: 16.13.1
React-dom version: 16.13.1
Parcel: 2.0.0-beta.1

Steps To Reproduce

Have a parent element
Have a child element (A)
Using conditional rendering (condition ? A : B) "hide" A
B now shows
Try and select B using Chrome Dev Tools's "Select an element in the page to inspect it"
Jumps nowhere/Can't find it manually in the list.

Example

In this example, I demonstrate that it works on the Search Bar (light grey bar) which is the TextField=>InputBase tree, and the Container that contains the search & images and how hovering over the image doesn't do anything.
I then click on the image and nothing happens & the state panel on the right of Dev Tools empties itself.

The current behaviour

Can't find newly rendered components in React Dev Tools Components panel

The expected behavior

Being able to find the newly rendered components in React Dev Tools Components panel

It doesn't look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://codesandbox.io/s/new), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem. Screenshots or videos can also be helpful if they help provide context on how to repro the bug.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

@bvaughn

@bvaughn how "complex"/big of a repo is allowed for me to link to?
As so far I have had 0 luck replicating a basic example on codesandbox as it behaves as it should.

The smaller it is, the better chance someone will be able to look at it and find/fix the problem.

So it appears the issue is Google-Analytics.
If I remove the code it is fine, add it, and it breaks.
As such I have created a branch where I have removed basically all of the code except what is really needed to show this breaking.

https://github.com/BlobEmoji/blobs.gg/tree/26f85b52f18efc7900f80891505549d162b3436c

In order to repo

Clone repo
npm i
npm start
go to HTTP://localhost:1234
Go into Chrome Dev Tools (Ctrl+Shift+i)
Go to components (Figure 1)
Reload page
Note that only App/Homepage/OfficialServers/Guilds show (Figure 1)
Go to index.html
Remove lines 10 to 23 aka the GA stuff (this stuff)
Save
Parcel will rebuild and reload page
Go back to Chrome Dev Tools
Note there is a lot more content (Figure 2)

Figure 1

Figure 2

Hopefully, this is more helpful :)

Thanks for the info :)

I'll tag this as "needs investigation" in case anyone has bandwidth to dig in.

Thanks man :)

I can't reproduce the broken behavior your screenshot shows using this repo. For me, the nested Guild and Emoji components are visible with GA or without.

Passing the issue back to you for more repro instructions. You might need to dig in and see if any errors are being thrown by DevTools. There might also be another web extension you have installed that is making this happen.

They mentioned in their comment they created a new branch, so I guess I expanded step 1 from their steps into:

git clone https://github.com/BlobEmoji/blobs.gg.git
cd blobs.gg
git checkout 26f85b5

@Yohlo

Thanks @Yohlo. Let me try that.

Ah! That was the missing step.

This is interesting. Checking out that branch: If I load the page, then open DevTools, it looks fine. If I open DevTools and then (re)load the page, some components are missing.

Interesting to note that I stepped all the way back to DevTools v4.0.0 and this bug still happens. This is definitely not a recent regression.

It's also interesting to note that I can't repro this with the DevTools extension detached (and logging debug info) only when it's docked to the bottom and I reload the page after it was already open. That's going to make it a little harder to track down.

I've been able to reduce the repro to the following:

import React, { useEffect, useState } from 'react'

export default function App() {
  const [showChild, setShowChild] = useState(false);

  useEffect(() => {
    // This setTimeout() is necessary to repro the bug.
    // Some value larger than 100 seems necessary too (on my local hardware).
    setTimeout(() => {
      setShowChild(true);
    }, 250);
  }, []);

  return showChild ? <div>TEST</div> : null;
}

Unfortunately I have not been able to reproduce the failing behavior in one of our integration tests.

Still, a small repro is very promising. Going to dig into the actual code now and see what's breaking 😄

Very nice work :D
Glad I wasn't losing the plot, weird how picky it is in regards to the DevTools behaviour

I think this bug is actually being caused by Fast Refresh bailing out without calling the decorated DevTools hook:
https://github.com/facebook/react/blob/b6a750be3ca0fc4126ef018e205c951b890c1881/packages/react-refresh/src/ReactFreshRuntime.js#L513-L522

Although it seems sensitive to timing so I'm having trouble catching it in the debugger.

Conceptually, it's possible for Fast Refresh to intercept a renderer that it isn't compatible with:
https://github.com/facebook/react/blob/b6a750be3ca0fc4126ef018e205c951b890c1881/packages/react-refresh/src/ReactFreshRuntime.js#L472-L478

In which case, subsequent commits from react-dom will effectively block DevTools entirely:
https://github.com/facebook/react/blob/b6a750be3ca0fc4126ef018e205c951b890c1881/packages/react-refresh/src/ReactFreshRuntime.js#L519-L522

This looks wrong. FR should always pass through to DevTools.

@bvaughn

Thanks for the fix @bvaughn :)

Navigation Menu

Repository navigation

Bug: DevTools not finding/showing React components #20100

Steps To Reproduce

Example

The current behaviour

The expected behavior

14 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Bug: DevTools not finding/showing React components #20100

Description

Steps To Reproduce

Example

The current behaviour

The expected behavior

Activity

bvaughn commented on Oct 26, 2020

Lagicrus commented on Oct 26, 2020

bvaughn commented on Oct 26, 2020

Lagicrus commented on Oct 26, 2020

bvaughn commented on Oct 26, 2020

Lagicrus commented on Oct 26, 2020

bvaughn commented on Oct 27, 2020

14 remaining items

Yohlo commented on Oct 28, 2020

bvaughn commented on Oct 28, 2020

bvaughn commented on Oct 28, 2020

bvaughn commented on Oct 28, 2020

bvaughn commented on Oct 28, 2020

bvaughn commented on Oct 29, 2020

Lagicrus commented on Oct 29, 2020

bvaughn commented on Oct 29, 2020

bvaughn commented on Oct 29, 2020

Lagicrus commented on Oct 30, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions