CODEWITHSUNDEEP
reactjsminifyreact-devtools
Youri W.
Youri W.

Reputation: 51

React dev tools shows components as <t> (minified)

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!

Upvotes: 5

Views: 2099

Answers (2)

Super Jade
Super Jade

Reputation: 6364

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
  1. In your package.json, add a new script:
"build:dev": "dotenv -e .env.development react-scripts build"
  1. Now create a development build:
npm run build:dev
  1. Deploy locally, probably with
npm start
  1. You can now use your previously installed React Dev Tools extension to view your components:

Components

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

Upvotes: 0

Bikas
Bikas

Reputation: 2759

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.

Upvotes: 4

Related Questions