[DevTools] Components tab goes blank with React 16.8.0 #20261

abelardolg · 2020-11-15T14:52:32Z

React version: 16.8.0

Steps To Reproduce

Install react 16.8.0

Build a hello world with any component
Open React Dev Tools.
Choose components tab.
Nothing will be seen.

Link to code example:

The current behavior

Tab "Component" is blank

The expected behavior

Tab "Component" should show React components

FYI: I installed Material UI library.
Chrome: Versión 86.0.4240.183 (Build oficial) (64 bits) Ubuntu 18.04.
Tested today.
Versión
4.10.0 (11/12/2020)
Actualizado
13 de noviembre de 2020

brettgoulder · 2020-11-16T05:02:51Z

I am unable to reproduce this bug unfortunately.

abelardolg · 2020-11-16T08:57:07Z

Hi @brettgoulder ,

Are you using Google Chrome for Ubuntu with the version I specified?
I will upload a screenshot to document this issue.

Best regards.

brettgoulder · 2020-11-16T16:54:11Z

@abelardolg yes, I just checked and I still can't confirm it on 18.04. Here's a screenshot:

Here's the URL for the test app: https://mzfm7.csb.app/ and code: https://codesandbox.io/s/lucid-franklin-mzfm7

zachwright · 2021-02-16T23:23:52Z

I'm also experiencing this issue. My app is running on localhost without errors, but the Components tab is blank.

Is there a way to view the error logs of the React Dev Tools to see if RDT is failing somehow even if my app isn't complaining?

Versions

Chrome: 88.0.4324.182 (Official Build) (64-bit)
React Dev Tools: 4.10.1 (12/4/2020)
React Version: 16.8.6

seyofori · 2021-03-08T12:29:38Z

also been experiencing this issue for a few days now. It's gotten to the point where there's a bug I'm struggling to figure out without the devtools, so I'm resorting to thsi

bvaughn · 2021-03-08T14:52:29Z

Is there a way to view the error logs of the React Dev Tools to see if RDT is failing somehow even if my app isn't complaining?

Yes:

Undock the developer tools from the main window
Open a second set of developer tools (View > Developer > Developer Tools)

undock-devtools-Kapture.2021-03-08.at.09.52.02.mp4

flying-sheep · 2021-06-23T10:07:15Z

User with firefox here. I get this too.

Following @bvaughn’s instructions, I just get Attempt to postMessage on disconnected port in the console multiple times per second. Using the browser dev tools, when I try to finds the frame with the extension, I get to chrome://browser/content/webext-panels.xhtml. That contains a <stack id=webext-panels-stack><browser id=webext-panels-browser>...</browser></stack>.

When I instead go through about:debugging and click Inspect next to the extension, I can indeed inspect panel.html. There’s no errors, there is just a width: 0, height: 0 empty div where content should be. I see a warning about some cookie being outdated every second though.

flying-sheep · 2021-06-23T10:23:21Z

Trying to open devtools in the test app results in an error (sometimes, it’s really flaky).

Clicking Dismiss × next to the error submission UI does nothing.

Could not inspect element with id 3
InspectedElementContextController@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:31391:43
Suspense
ErrorBoundary_ErrorBoundary@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:30033:5
div
InspectedElementErrorBoundaryWrapper@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:30175:46
NativeStyleContextController@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:32660:38
div
div
OwnersListContextController@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:28267:37
SettingsModalContextController@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:28708:40
Components_Components@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:34512:52
ErrorBoundary_ErrorBoundary@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:30033:5
PortaledContent@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:30146:34
div
div
ProfilerContextController@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:34137:35
TreeContextController@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:24944:31
SettingsContextController@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:25547:35
ModalDialogContextController@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:30233:38
DevTools_DevTools@moz-extension://cda19686-3928-4e8e-8c40-7419ecd1d955/build/main.js:37240:27

bvaughn · 2021-06-23T15:32:30Z

Attempt to postMessage on disconnected port

In my experience this generally means that the extension has been invalidated (e.g. b'c it was just updated or something edge casey) and reloading the page will fix the problem.

When I instead go through about:debugging and click Inspect next to the extension, I can indeed inspect panel.html. There’s no errors, there is just a width: 0, height: 0 empty div where content should be. I see a warning about some cookie being outdated every second though.

Does this reproduce for you? If so, are you using Chrome Canary or some other pre-stable-release version? I've only seen blank behavior from pre-release Chromes.

flying-sheep · 2021-06-24T19:09:01Z

Firefox stable, and reproducible (Most of the time: Very rarely, the tree view actually shows up)

ashmeet-kandhari · 2021-06-27T00:40:24Z

Is this still an issue?
Looks like this was fixed in version: 16.14.0
Can we confirm, if not would like to take this up

flying-sheep · 2021-06-27T15:39:57Z

I have React 16.14.0 and devtools 4.13.5 (0ae5290) and this is an issue.

bvaughn · 2021-06-28T03:41:52Z

Can we confirm, if not would like to take this up

@ashmeet-kandhari Please feel free to take a look! Help would be welcome.

ashmeet-kandhari · 2021-06-29T08:15:13Z

Sure

Can we confirm, if not would like to take this up

@ashmeet-kandhari Please feel free to take a look! Help would be welcome.

Sure @bvaughn, will have a look

ashmeet-kandhari · 2021-06-30T04:45:53Z

Earlier I was able to face the same issue.
Unfortunately, when I deleted my node-modules and package-lock.json and re-installed everything, am not able to reproduce it
Here are my dependencies

"dependencies": { "react": "16.14.0", "react-dom": "16.14.0", "react-scripts": "^4.0.3" }, "devDependencies": { "react-devtools": "^4.13.5" }

ashmeet-kandhari · 2021-06-30T06:15:30Z

Earlier I was able to face the same issue.
Unfortunately, when I deleted my node-modules and package-lock.json and re-installed everything, am not able to reproduce it
Here are my dependencies

"dependencies": { "react": "16.14.0", "react-dom": "16.14.0", "react-scripts": "^4.0.3" }, "devDependencies": { "react-devtools": "^4.13.5" }

I was able to reproduce the issue when I was using react 16.8.0 version after a clean install.
I have narrowed down the issue to a map variable fiberToIDMap not getting populated in react_devtools_backend.js with react's 16.8.0 version.

Can somebody guide me what triggers the population of that variable?

ashmeet-kandhari · 2021-06-30T13:24:26Z

I have React 16.14.0 and devtools 4.13.5 (0ae5290) and this is an issue.

Hi @flying-sheep ,
Can you do a clean install and confirm if this is still an issue?

bvaughn · 2021-06-30T13:31:49Z

@ashmeet-kandhari Are you able to reliably reproduce this? If so, can you share a repro with me (either a GitHub project or a Code Sandbox built with the version of React you're talking about)?

ashmeet-kandhari · 2021-07-01T14:22:42Z

@bvaughn
I was talking about react 16.8.0 where this issue comes up.
Here is the git repo
https://github.com/ashmeet-kandhari/reactjs-helloworld

Just run

npm install
npm start
Open the page along with react devtools plugin where you will see blank
Click on the Open Element button and hover on the page, you will see the error in console about missing fibreId

My System Config
OS: Windows 10 version 21H1
OS Build Version: 19043.1081
Browser: Chrome 91.0.4472.124 (Official Build) (64-bit)

bvaughn · 2021-07-01T14:30:33Z

Thanks @ashmeet-kandhari! I can reproduce the blank component tab behavior with the project you sent, but have not had time to dig into why yet.

ashmeet-kandhari · 2021-07-02T13:28:39Z

Earlier I was able to face the same issue.
Unfortunately, when I deleted my node-modules and package-lock.json and re-installed everything, am not able to reproduce it
Here are my dependencies
"dependencies": { "react": "16.14.0", "react-dom": "16.14.0", "react-scripts": "^4.0.3" }, "devDependencies": { "react-devtools": "^4.13.5" }

I was able to reproduce the issue when I was using react 16.8.0 version after a clean install.
I have narrowed down the issue to a map variable fiberToIDMap not getting populated in react_devtools_backend.js with react's 16.8.0 version.

Can somebody guide me what triggers the population of that variable?

Hi @bvaughn,

I did dig deep into this and these are some findings I have

The issue is when using react v16.8.0 the method onCommitFiberRoot of hooks.js is not being called
When I dug deeper, I found that in react-refresh-runtime.development.js' -> hook.inject (line 451)

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

the if clause fails as scheduleRefresh and setRefreshHandler are not added/present in react-dom.development.js

This is the main reason for the field fiberToIDMap never gets populated and components don't show up in the dev tool

bvaughn · 2021-07-02T14:50:09Z

Oh right. It's not that DevTools and React 16.8.0 are incompatible. It's that Fast Refresh was breaking the DevTools hook at one point.

I fixed several DevTools bugs caused by Fast Refresh (#20129 as well as #21523 and #21536) and we made new releases of Fast Refresh. Unfortunately some past releases remain broken. I guess the best path forward here is to just avoid using those releases. (It's probably a good idea to use the latest bugfix release of a given minor anyway, e.g. 16.8.6 rather than 16.8.0)

ashmeet-kandhari · 2021-07-03T09:10:01Z

So Maybe this issue can be closed in that case?

flying-sheep · 2021-07-03T10:07:23Z

As said, we could both originally reproduce that with react 16.14, not 16.8.

When I purge my npm-shrinkwrap and reinstall everything, the issue is also gone, but the point of that file is to have a reproducible environment, so if the recommendation is to nuke it every time an issue appears, what purpose does it serve?

I’d rather know what dependency causes this and selectively update that one instead of nuking a (otherwise) known working environment.

bvaughn · 2021-07-03T17:02:13Z

@ashmeet-kandhari Yes, perhaps it could be closed. If the cause if this a known-to-be-broken version of Fast Refresh (that happens to be version locked with [email protected]) then I guess there isn't much value in keeping this issue open.

@flying-sheep I am not convinced you are talking about the same error/issue, based on your messages above.

bvaughn · 2021-07-03T23:31:26Z

I'm going to close this as something we won't/can't fix, since the problem is caused by a bad release of Fast Refresh. The solution: upgrade.

leocaseiro · 2021-11-03T05:05:12Z

Hi @bvaughn, could you please elaborate on what we need to update to fix this issue?
Is Fast Refresh a dependency of some library? Which one?

Should we update via npm or something like that?

Thank you!

slavivanov · 2022-11-22T11:27:31Z

Updating React and ReactDOM from 16.8 to 17 fixed it for me.

abelardolg added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label Nov 15, 2020

abelardolg changed the title ~~Bug: Components tab is going to blank with React 16.8.0~~ Bug: Components tab goes blank with React 16.8.0 Nov 15, 2020

bvaughn assigned abelardolg Nov 16, 2020

bvaughn added Component: Developer Tools Resolution: Needs More Information Type: Needs Investigation and removed Resolution: Needs More Information labels Nov 16, 2020

mglukhovsky mentioned this issue Dec 14, 2020

Bug: React DevTools components view is blank (reproduced in standalone mode) #20455

Closed

bvaughn changed the title ~~Bug: Components tab goes blank with React 16.8.0~~ [DevTools] Components tab goes blank with React 16.8.0 Jun 24, 2021

bvaughn added Type: Bug good first issue labels Jun 24, 2021

bvaughn removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug Type: Needs Investigation labels Jul 1, 2021

bvaughn unassigned abelardolg Jul 1, 2021

bvaughn removed the good first issue label Jul 3, 2021

bvaughn closed this as completed Jul 3, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DevTools] Components tab goes blank with React 16.8.0 #20261

[DevTools] Components tab goes blank with React 16.8.0 #20261

abelardolg commented Nov 15, 2020 •

edited

Loading

brettgoulder commented Nov 16, 2020

abelardolg commented Nov 16, 2020 •

edited

Loading

brettgoulder commented Nov 16, 2020

zachwright commented Feb 16, 2021

seyofori commented Mar 8, 2021

bvaughn commented Mar 8, 2021 •

edited

Loading

flying-sheep commented Jun 23, 2021 •

edited

Loading

flying-sheep commented Jun 23, 2021 •

edited

Loading

bvaughn commented Jun 23, 2021

flying-sheep commented Jun 24, 2021 •

edited

Loading

ashmeet-kandhari commented Jun 27, 2021

flying-sheep commented Jun 27, 2021 •

edited

Loading

bvaughn commented Jun 28, 2021

ashmeet-kandhari commented Jun 29, 2021

ashmeet-kandhari commented Jun 30, 2021

ashmeet-kandhari commented Jun 30, 2021

ashmeet-kandhari commented Jun 30, 2021

bvaughn commented Jun 30, 2021

ashmeet-kandhari commented Jul 1, 2021

bvaughn commented Jul 1, 2021

ashmeet-kandhari commented Jul 2, 2021 •

edited

Loading

bvaughn commented Jul 2, 2021

ashmeet-kandhari commented Jul 3, 2021

flying-sheep commented Jul 3, 2021 •

edited

Loading

bvaughn commented Jul 3, 2021

bvaughn commented Jul 3, 2021

leocaseiro commented Nov 3, 2021

slavivanov commented Nov 22, 2022

[DevTools] Components tab goes blank with React 16.8.0 #20261

[DevTools] Components tab goes blank with React 16.8.0 #20261

Comments

abelardolg commented Nov 15, 2020 • edited Loading

Steps To Reproduce

The current behavior

The expected behavior

brettgoulder commented Nov 16, 2020

abelardolg commented Nov 16, 2020 • edited Loading

brettgoulder commented Nov 16, 2020

zachwright commented Feb 16, 2021

seyofori commented Mar 8, 2021

bvaughn commented Mar 8, 2021 • edited Loading

flying-sheep commented Jun 23, 2021 • edited Loading

flying-sheep commented Jun 23, 2021 • edited Loading

bvaughn commented Jun 23, 2021

flying-sheep commented Jun 24, 2021 • edited Loading

ashmeet-kandhari commented Jun 27, 2021

flying-sheep commented Jun 27, 2021 • edited Loading

bvaughn commented Jun 28, 2021

ashmeet-kandhari commented Jun 29, 2021

ashmeet-kandhari commented Jun 30, 2021

ashmeet-kandhari commented Jun 30, 2021

ashmeet-kandhari commented Jun 30, 2021

bvaughn commented Jun 30, 2021

ashmeet-kandhari commented Jul 1, 2021

bvaughn commented Jul 1, 2021

ashmeet-kandhari commented Jul 2, 2021 • edited Loading

bvaughn commented Jul 2, 2021

ashmeet-kandhari commented Jul 3, 2021

flying-sheep commented Jul 3, 2021 • edited Loading

bvaughn commented Jul 3, 2021

bvaughn commented Jul 3, 2021

leocaseiro commented Nov 3, 2021

slavivanov commented Nov 22, 2022

abelardolg commented Nov 15, 2020 •

edited

Loading

abelardolg commented Nov 16, 2020 •

edited

Loading

bvaughn commented Mar 8, 2021 •

edited

Loading

flying-sheep commented Jun 23, 2021 •

edited

Loading

flying-sheep commented Jun 23, 2021 •

edited

Loading

flying-sheep commented Jun 24, 2021 •

edited

Loading

flying-sheep commented Jun 27, 2021 •

edited

Loading

ashmeet-kandhari commented Jul 2, 2021 •

edited

Loading

flying-sheep commented Jul 3, 2021 •

edited

Loading