React devtools stuck at Loading React Element Tree...

[ananthakrishna-hs]

Have tried re-installing both extension and chrome.

OS: Ubuntu 20.10 Chrome: 107.0.5304.87 (Official Build) (64-bit) Scenario: Dev tools shows

 Loading React Element Tree...

If this seems stuck, please follow the [troubleshooting instructions](https://github.com/facebook/react/tree/main/packages/react-devtools#the-issue-with-chrome-v101-and-earlier-versions).

on local development servers.

[Konigj]

Same, it is not working since a full month. Works fine in other browsers. I tried reinstalling the extension several times and it didn't help.

[IqbalAhmadi]

I am having the same issue. Anyone got a solution to this Loading React issue?

[mwisnicki]

Same here but only at work. Works fine on personal computer.

Tested on react website. In both cases Chrome 108 and extension version 4.27.1

When I inspect the devtools inspector I can see following errors in console:

[mwisnicki]

This is probably the same as #25818

[mwisnicki]

I think computer restart helped with mine. Same chrome version but now works.

[Konigj]

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.

[johnhunter]

Seeing this with Chrome 110.0.5481.100, DevTools version: 4.27.2-1a88fbb67

[aagarw33]

I have the same problem as @johnhunter, I see this exception in the console.

[gmanc2]

On Windows this issue caused a BSOD for me.

[johnhunter]

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.

[anders-kaffia]

Same here. Chrome Version 111.0.5563.147. On localhost. Next JS 13 project. @johnhunter s solution worked for me for a bit.

[hoxyq]

Closing as duplicate of https://github.com/facebook/react/issues/25818, lets consolidate conversation there.

[wproman]

Remove the extension and install it again.

[johnhunter]

Remove the extension and install it again.

This did not resolve the problem. Still happening with fresh install of extension 4.27.8 and Chrome 114.0.5735.133

[johnhunter]

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

[hoxyq]

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

[johnhunter]

I need more information about the problem

Thanks. I see a lot of TimeoutError: Timed out while inspecting element nnn errors once I undock the panel. But so far closing and reopening the DevTools seems to reload the react tree ok. I'll see if I can reproduce the issue over the day and report back.

[johnhunter]

When the stuck condition occurs; undocking the panel and opening the console shows the following:

Closing and reopening the DevTools panel seems to reset the tree. This is different to the initial problem where I had to toggle the extension off and on to reset the tree.

So definitely an improvement but still occurring. Its happening on a large React app that I cannot share and so far has been difficult to create a repro case. Hopefully the console output can help narrow down the issue.

[hoxyq]

When the stuck condition occurs; undocking the panel and opening the console shows the following:

Closing and reopening the DevTools panel seems to reset the tree. This is different to the initial problem where I had to toggle the extension off and on to reset the tree.

So definitely an improvement but still occurring. Its happening on a large React app that I cannot share and so far has been difficult to create a repro case. Hopefully the console output can help narrow down the issue.

Thanks, timeout errors probably the product of the stuck condition, but not its reason

In your screenshot, you are capturing the console of your application, you should open a second one for the Chrome's DevTools, where extension might report something, here is the example:

Check out the title of this window

[johnhunter]

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.

[decaf-dev]

I'm getting the same behavior as the OP. I am using the stand alone server with a React plugin in Obsidian.md. Obsidian is built off of electron. It was working before but I recently upgraded my version of Obsidian.

react: 18.2.0 react-dom: 18.2.0 react-devtools: 4.28.0 electron: 24.3.1 chromium: 112.0.5615.183 os: Mac Ventura 13.2

My import statement is

import "react-devtools";`
import { createRoot, Root } from "react-dom/client";

Here is the socket log

[johnhunter]

I'm still seeing this issue, even on fairly small projects.

react: 18.2.0 react-dom: 18.2.0 react-devtools: 4.28.0 os: MacOS 13.5.2

[hoxyq]

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

[johnhunter]

@hoxyq Thanks, I'll report back when I get a chance to verify.

[AmirAmArA]

@johnhunter i don't if this is the same case as mine but i tried to update my nodejs to LTS and it solved the case

[chiptus]

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

[hoxyq]

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

Thanks for reporting this! It looks weird, because proxy content script is running in ISOLATED world, which should have chrome.runtime.

I am also using Chrome v119.0.6045.105 and don't have such problem, is this constantly reproducible? Can you try reinstalling the extension?

[shengbeiniao]

react dev tools timeout when inspect large project

The timeout occurred at InspectedElementContextController

dev tools version: 5.0.0 react version: 16.14.0 chrome version: 120.0.6099.63

WSL Ubuntu 22.04.3 LTS

[inoyakaigor]

Can you try reinstalling the extension?

I also have this issue. I have tried to reinstall react devtools and nothing changed

[megha8191]

anybody finds sol?