React Developer Tools not showing correct components

[varunsingh87]

Do you want to request a feature or report a bug?
Report a Bug

What is the current behavior?
The React Developer Tools, when I deploy a React App to GitHub Pages, do not show the React components. The Components tab instead displays

#16840 told me to use that extension but that doesn't work

Update:
I uninstalled and reinstalled React and now I get a blank screen. Additionally, when run on localhost (development build) it shows the right components.
On localhost, it shows the development mode, and I see what I want to see on production mode:

What is the expected behavior?
The React Developer Tools should show the components.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
on Google Chrome, React v4.2.1

[bvaughn]

The React Developer Tools, when I deploy a React App to GitHub Pages, do not show the React components.

I think this is a misunderstanding 😄 From that screenshot, it looks like React DevTools is showing your components. The component names have just been minified.

This is because the "name" of your component is just the name of the function. Most JavaScript projects are configured to minify the names of functions and variables as part of the production build process- so that the resulting code is smaller and downloads faster. This means that a component named MyComponent might get be shortened to something like a or t.

For example- assuming you're using create-react-app (just a guess) it's configured to preserve display names only in development mode.

[varunsingh87]

@bvaughn How do I undo this configuration?

[bvaughn]

Can't say, since I don't know anything about your app. I would recommend against doing this in production mode though. It's generally a good idea to minify your JavaScript 😄

[iraqwarvet31]

Looks like your webpack is in production mode. You can fix this by changing your webpack.config.js,

from:
mode: 'production',
to:
mode: 'development',

[BentonFraizer]

Hello everyone.
In my case (using webpack 5.75.0) I just deleted the row devtool: 'source-map'
from configudation file webpack.config.js