4

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.

Ellis
  • 395
  • 3
  • 8
  • 1
    Did you find a solution ? – jsaddwater Jun 22 '21 at 12:25
  • 2
    Solution? No. I did a lot of search, but haven't found a solution to this, yet. (There may be possibilities requiring installing extra packages, or changing configurations "inside" the node_modules folder, but I don't want to go there.) – Ellis Jun 23 '21 at 13:22

1 Answers1

-1

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

Jakson Moura
  • 36
  • 1
  • 5
  • Thanks. But if I understand it correctly, (1) this "babel-plugin-styled-components" tool requires modifying babel config, and (2) create-react-app does not support modifying babel config by default. So one needs to install more plugins. In other words, we have to install babel-plugin-styled-components to make styled-components to work like we want, and then we have to install more plugins to0 make babel-plugin-styled-components to work. For something which styled-components should have been supporting in the first place :o/ – Ellis Mar 24 '22 at 16:26