Change:
This started after last update 4.20.0 ! ! Every time No response No response No response No response No response No response
We're sorry you've seen this error. Unfortunately the URL you provided ("localhost") is not publicly accessible. (This means that we will not be able to reproduce the problem you're reporting.) Please help us by providing a link to a CodeSandbox (), a repository on GitHub, or 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: Issues without repros are automatically closed but we will re-open if you update with repro info.
Thank you for providing repro steps! Re-opening issue now for triage.
Sorry for the "Website or app " But it just didnt work with "Website or app localhost"
I've just stumbled across the same issue, but i think i may have managed to find a workaround to the bug for now, which is to navigate to another external third-party React website (eg, , , ), and then navigate back to your localhost site, while keeping Chrome DevTools React Developer Tools open throughout the process. Give that a go? Note: Not all external public third party React sites work with the workaround approach. So for example, navigating to other public React sites such as Facebook, Instagram, and Paypal does not appear to work as a temporary workaround. _ Chrome @ React Developer Tools @
I've tried with netflix but it doesn't seem to work, sadly =( thanks for your advise anyways! may be it will help someone else
I've updated my original comment, with the addition of React site, which is proven to also reliably work as a workaround for me, so try that too. But also found it does not work with the PayPal React site as a workaround. Besides that, i agree, this is a regression bug
Sadly didn't work as well
Does React Dev Tools load up elements when you navigate to ReactJS, Netflix or CNN? If not then, here is a refined step-by-step set of instructions for a workaround: Open a new tab Ensure Chrome Dev Tools is not open at all Navigate to (loads faster) Open Chrome Dev Tools React Dev Tools The React elements should load up and display for site (probably most important here) Click on any React element within React Dev Tools (preferably a React element that actually holds both props + state values, where that data would then be displayed to the right panel) Now navigate to your localhost site
The reason the GitHub bot asked for a URL that we could access (not "localhost") is because there might be something specifically going on with your local website version. Localhost apps in general work fine with DevTools. In fact, we use a running on localhost to build DevTools features. So the first question I would ask is: Does React DevTools work on other sites? For example, if you visit , does DevTools work? If so, this may suggest there's something specific with your website. If not, it may suggest that you have another extension installed that's interfering. If this is the case, it would be helpful for you to tell us which extensions you have installed (you can view this in about:extensions).
This bug also affected my colleague as of today, where the workaround i posted resolved the issue for now, for both me and my colleague, and his version of React Dev Tools is also at . Besides, as requested, here's my list of enabled Chrome extensions: Awesome Screenshot and Screen Recorder | The Homepage Developers Deserve Ghostery – Privacy Ad Blocker Google Docs Offline Honey Octotree - GitHub code tree Picture-in-Picture Extension (by Google) React Developer Tools Redux DevTools Treeverse Chrome @ React Developer Tools @
Yes React DevTools work on other sites. I've tried to disable all extensions, nothing changed. DevTools worked perfectly fine until last friday (15.10) and since then nothing changed in my project.
cc in case this could be related to ?
yeah sounds like this might be related, I'll investigate
to confirm, the issue is that you open the Components tab but the Components Tree never loads? and this only happens on localhost when developing your app locally? is this happening to you on Chrome?
Yes and yes
- The scenario you've described is correct. Essentially the Component Tree never loads, until i apply my workaround.
do you by any chance have another repro of this in any other website that isn't your localhost development app? or a way to reproduce with your local app?
Sadly, i can't provide you a webside for NDA reasons
We generally ask people to try to reduce bugs to a minimal repro case. Often this is enough for them to remove any sensitive stuff from the app. (Often folks will even realize the specific cause of a bug while doing this.) Can you try stripping things out of your app until it works to see if you can create a repro like this for us?
like Brian mentioned, a barebones version of the an app that we could run where it still reproduces would be really helpful. Or even if you can get a repro in a CodeSandbox app?
I know you've already listed the extensions you've installed, but just to confirm, you only have 1 copy of React Developer Tools installed, is that correct?
Yes
I'm not sure it is possible to strip project since it is just too big and have too many modules. But you gave me an idea and i tried to run clean npx-create-react-app and it worked. I will try to get more info from my coworkers tomorrow, since i have no info about changes atm and it's too late to ask (it's past work time).
- correct. On your other question around reproducing minimal app, another NDA, that's also actually quite complex, as it's a large mono-repo with aplenty of inter-dependencies, and reproducing such an app to a minimal level is tricky to say the least. I just had a theory that React Dev Tools may now be in conflict with certain node module(s) perhaps, or in conflict with the webpack / typescript transpiled code. It's just a theory. But then with the workaround which works for me and my colleague, the component tree loads again on the target app. I'm not sure what to make of that.
The same issue also occurs on a remote hosted version of the app, which is internal / behind a firewall, not public. So for me, it isn't necessarily narrowed down to a server setup to say.
I forgot about it, same here
Understood that creating a smaller repro is a lot of work, but it needs to be done by someone (either you or us) as part of identifying and fixing a bug. We generally ask that people reporting bugs create the repro because sometimes this reveals an underlying problem in the app/user code itself, but also because you better understand the app (and how to quickly strip unnecessary parts out of it).
- I totally understand your point. Time-permitting, I'll see what i can do. I am thinking of creating a new React app off to scaffold the initial foundations, and then try to mimick as best i can with the organisational setup / configurations, especially the dependencies / compiler / transpiler configurations.
thanks for looking into it and
actually, if you can, one thing we could do to rule out my changes is to do the following: I created a branch where I reverted my changes related to detecting duplicate extensions here: , and I built a version of DevTools with those changes reverted.Could you download this build of DevTools: (or build it yourself off of this ) install it, and check if the problem still reproduces for you? Make sure you've disabled your current version of DevTools before installing this one. In order to install it, you should be able to drag and drop the zip file into . Let me know if you're able to do this and verify that the issue is still occurring?
- look like you've managed to narrow down the root cause to the selective changes around detecting duplicate extensions with which you've reverted to in the test version of the extension. As the described issue no longer persists, and the component tree loads instantly, on both localhost and the internal non-public remotely hosted app Prior to installing your reverted version, i was able to reproduce the issue on the stable release @ , on both environments; local and non-public hosted version of my organisational app. Same issue also resurfaced when i disabled your test version, and re-enabled the stable release version. Hopefully the results of this test will further help isolate the issue.
Same here. I've donwloaded your archive and it worked perfectly. Thanks!
- i was on a lookout for other React websites (after some extensive searching) which emits the same behaviour, and i finally found a React website that you should be able to continuously reproduce the issue against, while using React Dev Tools on the stable version of . The site is a well known public site targeted at Dev / Agile people like us ( ); . Also worthwhile noting that, i managed to apply my to resolve the issue on the above site. So it ticks off the similar behaviours i experienced. Hopefully, this finding will help you in your endeavours and that you'll now be able to debug the issue off the React website alone
Also, i realised i can only reproduce when opening a new tab, and then open React Dev Tools. But then i close Chrome Dev Tools while staying on , and then re-open React Dev Tools, and then the Component Tree loads up this time. Not sure how reliable this method is, but worth pointing out the observation, where opening a new Chrome tab each tab may be a more reliable approach to debug.
- Ok, i've managed to replicate the best workaround solution on my organisations' app too, both on localhost, and non-public hosted versions of the app. Open new Chrome Tab Navigate to troubled site (i.e. my org app, or publicly on ) Open Chrome Dev Tools Open React Dev Tools (stable version @ ) Observe that the component does not load up (just blank) Close Chrome Dev Tools altogether (stay on troubled site in same tab) Re-open Chrome Dev Tools Navigate again to open React Dev Tools Component Tree loads up this time To note again, the above instructions is carried out within the one and only same tab.
thanks for confirming that the issue went away when you installed this version: I'll go ahead and try to get a repro on the Atlassian site
btw , , what version of React are you using?
unfortunately I can't seem to reproduce the issue on What I did: Open a new tab Visit Open Chrome Dev Tools Open Components Tab After doing that the Components tree is always showing up, although sometimes it takes about a second for it to show. Are you always able to consistently reproduce on that site? ! !
14.0

Not 100% reproducible all the time, more like 95%. So i've followed what you've done, and it loads the component tree first time. But then i close that tab, and open a new tab, and follow what you've done again, and this time the Component Tree does not load up. Not sure how many time you've tried. But i assume we're both using latest Chrome, and using React Dev Tools (not your reverted changes version!)
I'll keep trying! and yes I'm using the latest chrome and React Dev Tools 4.20.0 (as I am showing in the screenshot in my comment)
And it looks like is developed on React version . So not sure if you have been trying to repro on this particular version also, locally.
Just to prove that i'm sane (not insane ), here's a GIF screen recording demo i've just recorded, reproducing issue on the public React website !
Scrap the other earlier comment around React versions, as i've just noticed the following public sites that have had no issues on loading the Component Trees first time, are using varying React versions: Netflix @ @ Instagram @
thanks for confirming! quick question, on , did you confirm if the issue also reliably gets fixed with my custom build: ?
When enabled your modded version, disabled stable version, it appears to be reliably fixed 100% of the time. Then when i reverted back the configurations, and what i found with Atlassian site is that it failed to load the component like 25% of the time, while it did load the tree on first load at like 75% of the time from around 20 attempts..
thanks and on your local application it fails 100% of the time when using v4.20.0, correct? I am still unable to reproduce on (and i'm wondering if that might be a separate issue), so i think it would still be helpful if you could provide a small app or code sandbox where the issue reproduces 100% of the time like it does for your app
Yeah, Atlassian could be a separate issue. Haven't retried local application since a few hours or so ago. I'll think about the app mimick-like re-creation, time-permitting of course, also provided that i am even able to provide a reproducible issue from that.
another thing to check is: when the components tree fails to load, do you see any error messages in the console?
-I normally lookout for console errors out of habit, and throughout all occasions when the component tree does not load up, there was no additional logging output to the console, not even errors. Also, by closing and re-opening Chrome Dev Tools, and navigating to React Dev Tools (Component tab) again on second attempt within the same tab, is now the best workaround for now, for me anyway. Talking about console logs, is it possible to recompile a zip binary with additional verbose logging output within the relevant code snippets / areas of concern?
No
For what it's worth, I started having the same issue today. One more detail, when I click on React Developer Tools extension icon in toolbar I'm getting this message: (in case that helps) Refreshing the page helps sometimes, but not always.
thanks for the info is this happening to you 100% of the time? are you also observing that message when hovering on the icon in the toolbar? for context, I'm trying to rule out whether some changes I made to detect duplicate extensions are the root cause of this issue. what's interesting is that those changes would prevent the Components tab from even appearing in DevTools at all (when duplicate installations are present), whereas in this case it's the Components Tree within the Components tab that isn't loading. moreover, this issue of the Components Tree not loading is a long-standing issue that happens sporadically (likely due to a race condition), so i'm not sure if we are mixing up potentially different problems here. interestingly, the originally reported issue does reproduce 100% of the time for and internal apps, so maybe there is something else going on.
Quick favor, could you verify if this build also completely fixes the issue in your local app?: If you can could you verify if either of these 2 builds completely fixes the issue for you?: NOTE: Make sure you've disabled your current version of DevTools before installing these other builds. In order to install it, you should be able to drag and drop the zip file into .
I can't say definitively (not to mislead you), but seems like works for me -- the issue is not appearing. While with ReactDevTools-warning- I'm still experiencing the issue.
apologies for the late reply, had a busy day at work, and after work On the error messages, yes, for some reason it now shows up while still on stable release . The exception reads as below after opening up React Dev Tools on the private remotely hosted app, with the component tree still reliably not loading up first time: Here's the screenshot as proof below: ! Saying that, i opened a new tab on the same url, opened React Dev Tools again, and this time the described exception ( ) is no longer thrown / output to console, while the component tree still failed to load. Guess i was lucky to spot this exception on the previous occasion (as seen on screenshot in this comment). Strange
Oh that's really interesting, thanks for sharing that, I think that might point to why the components tree fails to load even in other cases unrelated to my changes. will look into this a bit
If you can, would you mind trying out this last build and verifying that it reliably fixes the issue on your local apps? I think we narrowed down the cause even a bit further. thanks so much for all your help so far! Also let me know if you see anything logged to the console Again: Make sure you've disabled your current version of DevTools before installing these other builds. In order to install it, you should be able to drag and drop the zip file into .
when i installed this particular custom build (),and disabled the stable build version, i then performed multiple test runs of the local app on a remotely hosted internal site, and i can confirm that the Component Tree loads first time, for the 12 repeated test runs. 100% of the time. In-between the 12 test runs, i quit and restarted Chrome 3 times, and navigated to four different internally remote hosted app environment URLs. Again, each time, the component tree loaded first time without issues. Screenshot of first test run below: !
thanks it's unfortunate that that doesn't seem to line up with testing: let me know if you are able to try out thanks so much again for your help!
Upon installing , and removing / disabling the other versions, i found that after 6 repeated test runs (4 internal remote sites, and restarted Chrome once), the component tree loads up first time each time. Here's a screenshot with all the extra (mostly duplicate) console debugging info output. Note i invoked my own comment so you can tell the logging apart prior and after i opened React Dev Tools (Component tab): ! The logging repeated itself every couple of seconds or so since i opened React Dev Tools. The messages looked liked duplicates to me. Hopefully this will give you more useful info to work with
this is super helpful, thanks!
I'm seeing some unexpected data in those logs, so i have a couple of questions: You said you are using version 4.20.0 of ?Could you open , search for "React", and send me a screenshot of what you see? I'm looking for something like this: !
I just tested ReactDevTools-backend- version and it seem working fine for me! no issues
We run our localhost development build under a regular domain (set via /etc/hosts), and can confirm that while 4.20.0 would always show a blank page under "Components" tab (even after multiple page reloads / browser restarts) and that this build seems to have fixed the issue over multiple tab reloads / browser restarts.
I am indeed using React Dev Tools at stable version from the Chrome Web Store. I attach a screenshot below to prove this, where both our IDs match below. Ignore the other extension , it's absolutely nothing dev related and has been disabled for a long while. !
got it, thanks everyone for the info, that's really helpful!
will close it once the fix from is shipped and verified
Brilliant, and many thanks for your efforts on this fix! Are you in a position to give a rough estimate on when the next build version which includes this fix will be released out into the wild for dev minions like us? I'll also verify the fix when i receive the version update, and post results here.
it takes a few days for the Chrome Web Store to review a new published version, but hopefully within the next few days
just a heads up on this issue, v4.20.1 was finally approved in the Chrome Web Store, and we just submitted v4.20.2 for review, which should include the fix for this issue. i'll comment here again when v4.20.2 is finally out
v4.20.2 which includes this is now published in the Chrome Web Store I'll go ahead and close, but or let me know if you're still having issues (if so we can re-open)
Thanks for the fix. Unfortunately the new version does not work for me and my colleague even though the version you posted above was working after a manual install. Do you have any idea why this might be the case?
hmm thanks do you see any errors in the console when this happens? does it happen consistently? i suspect this might also be the same issue as
I don't see any errors in console. It is completely blank. It does happen consistently on chrome only and localhost only.
Sadly updating to v4.20.2- didn't fix the issue for me either. I'm running Chrome 95.0.4638.54, however, on Firefox 93.0 it seems to work fine. On Chrome I don't have any errors in the console, the component tree is just blank.
I still have the same problems: with Chrome (Version 95.0.4638.54 ) and React Dev Tools (Version 4.20.2 (10/25/2021)). It just doesn't show anything in the React Dev Tools when on localhost. No error or logs usually. I managed to display 1 error just once: <img width="547" alt="Screenshot 2021-10-27 at 15 02 14" src="https://user-"That makes this thing possibly related with but most of the times it's just blank and no errors are shown. Dismissing the error, when it appears, loads successfully the components tree though.
@ - Hi again, so my React Dev Tools Chrome extension updated to , and sadly for some reason, this didn't resolve the issue, on localhost, and on a private remotely hosted URL of app. Also, no new / unrecognised errors were personally observed within the console .. Although, i am still able to apply the workaround of re-opening Chrome Dev Tools React Dev Tools for the second time, and then voila, the Component Tree loads.
thanks for all the reports everyone! that's unfortunate :( that version contains the same fix as the custom build i shared here that seemed to fix the issue 100% of the time. I'm going to look more into this and keep you posted. thanks!
could i ask for another favor? when this happens to you, could you do the following: Detach Chrome Dev Tools itself into a separate window. On the Chrome Dev Tools window, press . This should bring up another dev tools window which is inspecting dev tools itself. On the new dev tools window, do you see any errors?
I've been having the same issues (zipped extension w/fix worked for me but 4.20.2 doesn't) I'm seeing a bunch of these errors with different node numbers in the dev console console: And then a bunch of similar warnings:
Aha. I never knew about this internal self-inspecting Chrome Dev Tools window. So upon carrying out the above instructions, i also appear to be getting similar errors each time the component tree fails to load. The errors consistently appear whenever the component tree fails to load, within the self-inspecting Chrome Dev Tools ( + + ). ! Sometimes, i see 1, or 2, or 3 instances of the tens of duplicate error messages: ! Also, as a sidenote, i noticed as of this morning, that the component tree loads only like ~5% of the time, first time on a localhost version of the app. But when testing on a remotely hosted version of the app, the component tree loads around ~75% of the time. It's very inconsistent. Not sure if this tidbit will aid your investigation. React Dev Tools: Chrome: Mac OS:
I just wanted to inform that v4.20.2 didn't solve this issue for me either (I created the issue that was closed and merged into this one). My problems are similar but not exactly the same as others report: First I get an blank components devtools (only localhost) but when picking select element arrow and hover over elements a lot of errors like this one shows up in the console: Uncaught Error: Could not find ID for Fiber "Grid" at getFiberIDThrows () at Object.getFiberIDForNative () at OverlayOverlay.inspect () at showOverlay () at onPointerOver () React - 16.8.6 Not sure if relevant but: react-scripts 4.0.3
We're shipping another version v4.21.0 to the web store which we think should address this (or reduce the amount of times it triggers ). It should be available in chrome in a few days.
version appears to have resolved the issue Managed to reliably load up the component tree on first load 100% of the time, after repeatedly closing and re-opening tab, and then opening dev tools component tab, for like 20 times across localhost, and remotely hosted sites of the local app, with 2 Chrome restarts in-between to mix things up. Many thanks for your huge efforts in resolving this issue
I confirm that the problem has been resolved with the last version, many thanks for the great work
FYI v4.21.0 is now on Chrome Web Store which should resolve or at least reduce the occurrence of this issue. If you keep seeing problems let us know and we'll re-open the issue. The root cause of of , which is what happened when this occurred, is still undetermined and needs investigation
I'm still experiencing the issue I updated DevTools to 4.21.0 and my Chrome is 95.0.4638.69 - the browser is managed by my company. On localhost the section is either blank or loads but does not update when something changes on the page. Everything works on websites like Also, from time to time when I hit it logs an error like the ones mentioned by other users.
Just to confirm– this happen consistently for you on your website (running on localhost)? it happen for any other websites? (What about your website deployed externally)? Any repro info you can share with us? (Can we run your website locally?)
, it stopped working about 2 weeks ago (at least that's when I noticed) and I haven't seen it working since then works fine on any other website, also on deployed version on the website I am working on. Unfortunately I cannot share it as it's only for users who bought the product. However, I can try creating a basic CRA app and see what happens.
let's continue the conversation in which is a more general version of this issue

Discussion:
// Running module factories is intentionally delayed until we know the hook exists. // This is to avoid issues like: https://github.com/facebook/react-devtools/issues/1039 <del> /** @flow */ </del> <ins> // @flow strict-local </ins> 'use strict';

) { return; } <ins> const extensionId = event.data.extensionId; </ins> window.removeEventListener('message', welcome); <del> setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__); </del> <ins> setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, extensionId); </ins> } window.addEventListener('message', welcome); <del> function setup(hook) { </del> <ins> function setup(hook, extensionId) { </ins> if (hook == null) { // DevTools didn't get injected into this page (maybe b'c of the contentType). return;

{ source: 'react-devtools-bridge', payload: {event, payload}, <ins> extensionId, </ins> }, '*', transferable,

'use strict'; <ins> import {CURRENT_EXTENSION_ID} from './constants'; </ins> let backendDisconnected: boolean = false; let backendInitialized: boolean = false;

{ source: 'react-devtools-content-script', hello: true, <ins> extensionId: CURRENT_EXTENSION_ID, </ins> }, '*', );

{ source: 'react-devtools-content-script', payload: message, <ins> extensionId: CURRENT_EXTENSION_ID, </ins> }, '*', );

type: 'event', event: 'shutdown', }, <ins> extensionId: CURRENT_EXTENSION_ID, </ins> }, '*', );

if (source !== window || !data) { return; } <del> if (data.extensionId !== CURRENT_EXTENSION_ID) { </del> <ins> if (data.extensionId != null && data.extensionId !== CURRENT_EXTENSION_ID) { </ins> if (__DEBUG__) { console.log( `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`, { currentExtension: EXTENSION_INSTALLATION_TYPE, <ins> currentExtensionId: CURRENT_EXTENSION_ID, providedExtensionId: data.extensionId, </ins> }, ); }