Bug: DevTools not finding/showing React components

[Lagicrus]

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

1. Have a parent element
2. Have a child element (A)
3. Using conditional rendering (condition ? A : B) "hide" A
4. B now shows
5. Try and select B using Chrome Dev Tools's "Select an element in the page to inspect it"
6. 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

[bvaughn]

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

[Lagicrus]

@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.

[bvaughn]

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

[Lagicrus]

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

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

Figure 1

Figure 2

Hopefully, this is more helpful :)

[bvaughn]

Thanks for the info :)

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

[Lagicrus]

Thanks man :)

[bvaughn]

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.