React dev tools shows components as (minified)

Question

Anyone have any clue why my react component dev tools looks like this? Prior to the most recent react dev tools major update, I could see the names of all my components, but now it just looks like this. Dev Tools View The component names are all minified!

Answer 1

You're using production/ minified version of the code. When such code is viewed in Devtool, you can only see single letter representation.

Make sure to run app in development mode and see if Devtool is picking up the right component name.

Answer 2

Anyone have any clue why my react component dev tools looks like this?

As @bikas mentioned, your code is minified.

Solution

What you need is a non-minified, i.e., development build of your project.

1. Install the dotenv-cli package in your dev dependencies:

npm i dotenv-cli --save-dev

2. In your package.json, add a new script:

"build:dev": "dotenv -e .env.development react-scripts build"

3. Now create a development build:

npm run build:dev

4. Deploy locally, probably with

npm start

5. You can now use your previously installed React Dev Tools extension to view your components:

6. Your components should now have readable names per your project. Happy coding :-)