react: React devtools stuck at Loading React Element Tree...

To fix this problem, you can update Chrome browser. I could not update it from the Settings > About Chrome page, so I just downloaded Chrome again, then installed it and it was fixed.

Remove the extension and install it again.

Still happening for me with Chrome Version 111.0.5563.146, extension Version 4.27.3

This is on localhost. The following workaround is less than ideal but gets me out of a bind:

• Close devtools panel
• Go to the extension details
• Toggle the extension off and on again
• open devtools panel again
• reload the page

Seems worse the bigger the React app is. The workaround restores functionality for a while but it ends up failing again after a while.

Seems similar to https://github.com/facebook/react/blob/main/packages/react-devtools/README.md#the-issue-with-chrome-v101-and-earlier but obviously were all on later versions.

Yep, that was the console in the screenshot. Here is the issue reproduced again.

In this case the error log did not appear until I selected another DevTools panel tab and then reselected the react Components tab (that also triggered the unrelated violation warning). The “stuck” message appeared in the react panel the whole time.

On Windows this issue caused a BSOD for me.

I’ve been getting this for a few weeks. on chrome 119.0.6045.105 with extension version 4.28.5 (10/25/2023)

I enabled dev mode for extensions and now I see this error when I try to open it:

Uncaught TypeError: Cannot read properties of undefined (reading 'sendMessage')
    at handleMessageFromPage (proxy.js:1:899)
handleMessageFromPage @ proxy.js:1
postMessage (async)
updateRequiredBackends @ backendManager.js:1
(anonymous) @ backendManager.js:1
welcome @ backendManager.js:1
postMessage (async)
sayHelloToBackendManager @ proxy.js:1
(anonymous) @ proxy.js:1
Show 3 more frames
Show less

hope this helps.

this is the piece of code that throws the error:

 function handleMessageFromPage(o) {
        if (o.source === window && o.data)
            switch (o.data.source) {
            case "react-devtools-bridge":
                n = !0,
                e.postMessage(o.data.payload);
                break;
            case "react-devtools-backend-manager":
                {
                    const {source: e, payload: n} = o.data;
                    chrome.runtime.sendMessage({ // <=== here
                        source: e,
                        payload: n
                    });
                    break
                }
            }
    }

seems like chrome.runtime is not defined

Hey, the browser extension v4.28.4 has been published today on Chrome’s extensions store. This version includes various changes to the content scripts injection logic, which should be more reliable now.

Can someone please check if this error is still reproducible?

cc @johnhunter

@hoxyq can we reopen this issue please. It does not appear to be resolved and the behaviour is different from #25818 - thanks.

Thanks for notifying. Opening only this one, lets keep all discussion here.

I need more information about the problem:

1. Any chance you have reproducible example? Or more details on when exactly it gets stuck?
2. When it gets stuck, can you please check if there are some errors in Chrome’s DevTools console? Not your application’s console, but Chrome’s DevTools, here is step by step description on how to do it: 2.1. Open a page with your application and open Chrome DevTools panel 2.2. Undock the panel into separate window (if not already) 2.3. Open React DevTools components tab 2.4. Open Chrome DevTools panel again (a separate one, you will have 2 after it). This one should attach to Chrome’s DevTools process, which we can debug now and check if there are some errors in console.

This is probably the same as #25818