When i install a new create-react-app and add babel-plugin-styled-components and add displayName option to babel-plugin-macros.config.js it isn't adding readable classNames as in the documentation -> https://styled-components.com/docs/tooling#babel-macro.
Here is a repo with the configurations https://github.com/Futekov3216/CRA.git
P.S i dont want to eject
Today I myself faced such a problem. The problem lies in styled-components itself. Macro in styled does not work since version 5.2.2, and it is not known when it will be fixed. Simplest solution:
npm i styled-components@5.2.1
This problem still persists in styled-components v5.3.3. Visit this to know more about the issue. At this moment you can install styled-components@5.2.1 as mentioned by @mxpv for getting the Component's name along with generated classes.
The issue causing this problem has been resolved.
Ensure that the version of babel-plugin-styled-components has at least version 2.0.3 by installing the package (as a dev dependency). The macro should work with the latest version of Styled-Components.
npm install -D babel-plugin-styled-components
--or--
yarn add -D babel-plugin-styled-components