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.

[Lagicrus]

Interesting note, when I just swapped branch to it, it worked fine (aka didn't break), but after running a npm i it broke again properly.

I had a range of extensions (not mentioning as it currently doesn't seem needed), so I disabled them all except React Dev Tools to obviously show the results.
But it still broke.

I then swapped to checking the Console, below you can see the results of it. This was after clearing the console then F5.

I am not going to link the files as they are massive, but they start with (top down)
https://starb.in/raw/LpawYg.json
https://starb.in/raw/FPdXwR.json
https://starb.in/NkKIaP.json

Hope this helps @bvaughn

[bvaughn]

I don't really see anything useful in that console. Am I suppose to? The source map warning is unrelated.

Also not sure I understand how those JSON files are supposed to be related, sorry.

[Lagicrus]

Honestly same, I was just praying that something in there made sense for what or why this is happening at the moment.
I am currently unsure of what to test tbh.

Could it be browser dependant?
I am currently testing this all in Chrome: 86.0.4240.75 maybe it doesn't occur in other browsers?

[bvaughn]

Sorry, what I meant was that I don't really understand your latest comment. I don't think the JSON files are useful/usable by me in any way to reproduce this issue? And the console warnings are definitely not related to what you're reporting.

I am currently testing this all in Chrome: 86.0.4240.75 maybe it doesn't occur in other browsers?

I am testing on OS X with Chrome 86.0.4240.111.

[Yohlo]

I was able to repro this with a fresh install of the linked repo. It seems that any script tag after the one that loads the react app module will cause this issue, in this case scripts/index.js. I removed GA entirely and just added a simple console log. Example here:

index.html

<body>
    <div id="root"></div>
    <script src="scripts/index.js"></script>
    <script> console.log("hi!") </script>
</body>

And the issue still occurred. Moving the script above resolves it:

index.html

<body>
    <div id="root"></div>
    <script> console.log("hi!") </script>
    <script src="scripts/index.js"></script>
</body>

I know that the React documentation recommends putting the script tag last, but I don't think this is expected behavior for the dev tools since the rest of the application works fine. But it's worth noting that putting type="module" or defer with the script tag will make browsers load that script last.

I also removed the API call and had it load the data by default, and could see everything in the components tree. So this probably isn't an issue related conditional rendering, but rather it's ability to catch re-renders and updates when the react module isn't the last script the browser loads.

[bvaughn]

I know that the React documentation recommends putting the script tag last

I'm confused by this statement. The docs section you linked to just shows loading React before loading your component code that uses React– and that's only applicable if you're using UMD builds (loading code into the global/window namespace).

I am not aware of any reason why additional <script> tags being present in the page should have any impact on React DevTools (and I don't see the behavior being described when running the repro app).

[Lagicrus]

Update, I was using Firefox 81.0.2 and same issue.
Also I am on Windows, but I doubt that is the issue.
Doing a npm i was able to trigger it.

I was also able to mirror the fix that @Yohlo had, by moving the index.js under the GA code.

[Yohlo]

...and that's only applicable if you're using UMD builds (loading code into the global/window namespace).

You're right, my apologies!

I am not aware of any reason why additional <script> tags being present in the page should have any impact on React DevTools (and I don't see the behavior being described when running the repro app).

It really shouldn't, I was just reporting what I was experiencing when trying to reproduce the issue. It so far has consistently worked when no other script follows in execution order, but fails when one does.

I am on macOS with Chrome 86.0.4240.111. Also tried it on Windows, experienced the same issue. I tried to recreate the issue on codesandbox, but was unable to. I did notice that the version of React DevTools available on codesandbox is 4.4.0-f749045a5, while I'm using 4.9.0-75726fadfd, so that could be why it's difficult to get this behavior on there!

[bvaughn]

Just tried the steps again and I still can't repro the issue.

Might be worth pointing out that my app doesn't look anything like yours. Your screenshot shows:

App
  Homepage
    OfficialServers
      Guilds
        Grid
          Grid
            Guild
              ...

But when I run the repro app, I see:

Search
Guilds
  Guild
    GuildIcon
    Emoji
    ...
  ...
CommunityGuildes
  Guild
    GuildIcon
    Emoji
    ...
  ...

I assume this is expected because it's just a reduced repro case, but just wanted to clarify.

I'm going to need one of you to dig into this and provide some more info. I can't trigger the problem, so there's not much I can do on this end to help.

• Does the console show any errors that might be related? (None of the ones in the screenshot above looked related but are there others?)
• If you detach the browser DevTools panel and open a second DevTools– does that DevTools have any errors (coming from one of your installed extensions) that might be related?

[Yohlo]

I think the link they shared for the repo included a specific commit that they put the reduced code, instead of it being in master. Did you checkout the commit they shared @ 26f85b5? Just wondering since your example looks different from what I got when trying to repro as well!

For me, there were no related errors in the console or the devtools.

[bvaughn]

I followed the repro steps above, exactly: #20100 (comment)

I assume that you did as well? If you have to do something else to repro this, that would be helpful to know.

[Yohlo]

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

[bvaughn]

Thanks @Yohlo. Let me try that.

[bvaughn]

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.

[bvaughn]

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.

[bvaughn]

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.

[bvaughn]

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 😄

[Lagicrus]

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

[bvaughn]

I think this bug is actually being caused by Fast Refresh bailing out without calling the decorated DevTools hook:

react/packages/react-refresh/src/ReactFreshRuntime.js

Lines 513 to 522 in b6a750b

	hook.onCommitFiberRoot = function(
	id: number,
	root: FiberRoot,
	maybePriorityLevel: mixed,
	didError: boolean,
	) {
	const helpers = helpersByRendererID.get(id);
	if (helpers === undefined) {
	return;
	}

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

[bvaughn]

Conceptually, it's possible for Fast Refresh to intercept a renderer that it isn't compatible with:

react/packages/react-refresh/src/ReactFreshRuntime.js

Lines 472 to 478 in b6a750b

	if (
	typeof injected.scheduleRefresh === 'function' &&
	typeof injected.setRefreshHandler === 'function'
	) {
	// This version supports React Refresh.
	helpersByRendererID.set(id, ((injected: any): RendererHelpers));
	}

In which case, subsequent commits from react-dom will effectively block DevTools entirely:

react/packages/react-refresh/src/ReactFreshRuntime.js

Lines 519 to 522 in b6a750b

	const helpers = helpersByRendererID.get(id);
	if (helpers === undefined) {
	return;
	}

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

[Lagicrus]

Thanks for the fix @bvaughn :)