React DevTools don't work when running development build

[dfenske]

Bug report

Describe the bug

The React Dev Tools don't show any components when I am running a development build. However they show the minified components when running a production build. This has only happened recently (sadly I don't know when it started). There are also no relevant errors in the console or network tab so I can't seem to debug why this is happening.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

When I run yarn build with this script: "build": "cross-env NODE_ENV=development next build", I see a blank "Components" tab in Chrome.

When I run yarn build with this script: "build": "cross-env NODE_ENV=production next build",, I see the minified components in the React dev tools.

Expected behavior

I would see the React components like I used to.

Screenshots

System information

• OS: macOS
• Browser: At least both in chrome and firefox (those are the two I tested)
• Version of Next.js: 9.5.2
• Version of Node.js: 10.18.1

[lxsmnsyc]

Shouldn't the development build be run on next instead of next build?

[nleborgne]

I am also experiencing this issue, using yarn dev. My dev script is simply next dev.
My DevTools version 4.10.1-f160547f47. I'm also on Mac OS using version 10.0.6 of Next.js

[akhilalekha]

I'm too experiencing this issue. No components are visible in react devtools.

Next.js version:  11.1.2
React version: 17.0.2,
React Dev tools : 4.20.1 (10/19/2021)
Chrome version: 94.0.4606.81 (Official Build) (64-bit)
OS Version: Ubuntu 20.04.3 LTS

[nleborgne]

Hey, what version of React are you using? You can find it in the package.json file

[akhilalekha]

17.0.2 @nleborgne

[shubh-mehrotra]

Do we have any update on this?

[jcdevs]

I'm having this issue as well, and need to be able to showcase dev tooling in a pitch for React.

[aminbenselim]

FYI. this issue is still relevant as I am also unable to see components tree in React devtools when running next dev

[devafterdev]

Turned off PWA (next-pwa), that worked for me.

[stevefrench39]

Swapping out my dev command from next to next dev fixed it for me. Commenting out Sentry plugin fixed it for me.

[selenecodes]

Having the same issue, the react devtools extension works fine on the react website so it's not my browser.

[AliHoussein]

Same issue here, still relevant!

[AliHoussein]

actually it is solved - it certainly was the browser, running Brave / Chromium 94, updated to 108 and everything works back again.

[tolanbot]

why wouldn't Chrome make this extension work if it was the browser that would mean Chrome is the issue?

[selenecodes]

For me this issue was tied to me using preact in which case you'll need to install the preact devtools

[SRD75]

Still an issue 2.5 years later on http://localhost:3000/

React dev tools > Components says:

Loading React Element Tree...

If this seems stuck, please follow the [troubleshooting instructions](https://github.com/facebook/react/blob/main/packages/react-devtools/README.md#the-react-tab-shows-no-components). I don't 

In chrome://extensions there is no "service worker (inactive)".

Chrome is at the latest version, 112.0.5615.138.

Not using preact,

React dev tools are working on other websites.

[SRD75]

Also logged at facebook/react#26757

[dinhanhthi]

"Looks like this page doesn't have React, or it hasn't been loaded yet." :(

[tolanbot]

I have same issue currently

[tolanbot]

hmm well that's very strange suddenly it works and I didn't do anything different haha

[jhancock532]

I had this issue on Chrome (v120) Next version 13.0.5, switching browsers to Firefox & using the Firefox React Devtools extension resolved the issue.

[steinarb]

Still an issue for me with react devtools 5.0.0, chromium 120.0.6099.109 (Official Build) built on Debian 12.4, running on Debian 12.4 (64-bit), react 18.2.0.

React DevTools worked for me a while not too far back (weeks maybe?), with the same react version.

So it's probably some upgrade that broke it (chromium most probably...? debian was bumped from 12.2 to 12.3 and then quickly to 12.4 and that probably brought in a new chromium version).

[steinarb]

React devtools now works for me again in chromium on debian 12.4.

The version and build reported by the browser is still the same (Version 120.0.6099.216 (Official Build) built on Debian 12.4, running on Debian 12.4 (64-bit)), but I know the .deb package(s) have been updated at least once (though I haven't kept track of the exact package version used. The current debian package version of chromium is 120.0.6099.216-1~deb12u1, and here react devtools works for me).

[steinarb]

I have to correct myself: the react devtools works for releases of https://github.com/steinarb/oldalbum (i.e. it works here https://oldalbum.bang.priv.no ) but not for dev versions of the same application.

But for other webapps with the exact same software stack and same versions of everything the react devtools work fine in both local dev mode and in released/deployed versions.

The webpack file says development. But there is no difference in the result for releases or development versions in my setup: it's delivered as an HTML file loading a bundle.js file whether I'm running in the dev setup or in production: no node.js involved after the webpack'ing.

So: weird!

[ThandoSomacele]

[CRIMSON-CORP]

Worked for me 🚀🚀

[Marjona6]

This fixed it for me too. Thank you.

[FlowMaster83]

It works. Thank you!

[Harshithsoma]

Could'nt able to narrow down the reason , but removing the chrome extension and installing it back worked!

[steinarb]

For me it was upgrading the plugin that fixed the problem. See: #18321 (reply in thread)

[steinarb]

FWIW I had the problem without running a node.js server. I had the problem with a statically served bundle.js.

[steinarb]

Still has the problem but only on chromium (Version 121.0.6167.160 (Official Build) built on Debian 12.4, running on Debian 12.5 (64-bit)).

Works on the same served bundle.js på vivaldi (also chrome/chromium based), (6.6.3271.53 (Stable channel) stable (64-bit) on debian 12.5 "bookworm")

And also works on firefox (but that's probably a different beast?) (115.9.1esr on debian 12.5 "bookworm")

React Developer Tools versions are: 5.0.0 (12/5/2023) on chromium, 5.0.2 (3/8/2024) on vivaldi, 5.0.2 on firefox

Upgraded chromium React Developer Tools version to 5.0.2 and then I could open Components also in chromium

[EstesE]

OS: KDE neon 6.0 - Kernel Version 6.5.0-44-generic (64-bit)
Chrome: Version 126.0.6478.182 (Official Build) (64-bit)

Uninstalled extension and reinstalled and everything works now. I'm not sure what version of the extension I had before reinstalling it, but I believe it was fairly old.

[akchavan7]

Try to close the current tab and open it again in a new tab. This worked for me.

[steinarb]

Closing the current tab and open it again won't necessarily work.

What will work is to update the plugin to a version that works. See #18321 (reply in thread)

[FelixSelter]

I thought no way that this works but it infact did. So simple. Maybe because the browser has been launched from the terminal. Just close and reopen by pasting the url. Thank you