How can I disable classname obfuscation for development only

user_1990288 0
Viewed 213

In a React app, how can I disable classname obfuscation for development only?

I want to see the following only in production build, but in the development when I run "npm start" I want to see the classnames unobfuscated.

<div class="sc-kYrkKh bteCVQ">

Reason: when i want to look at an html element in the browser, I want to be able to easily see the component name.

I have seen this (ie. classname confuscation on production only) in multiple projects, but I did not configure it myself, and I don't know/remember how it's done.

In my current specific case (=project) we are using styled components, but perhaps it doesn't matter.

reactjs
1 Answers

It looks like the answer is Babel plugin.

From its documentation:

In your page source you'll see: <button class="Button-asdf123 asdf123" /> instead of just <button class="asdf123" />.

It also allows you to see the component's displayName in React DevTools. For example, consider writing a styled component that renders a button element, called MyButton. It will normally show up in DevTools as styled.button, but with the displayName option enabled, it has the name you gave it: MyButton.

This makes it easier to find your components and to figure out where they live in your app.

Source: https://stackoverflow.com/a/45505519/18272040

user_182720400
Related