Using styled-components to show componentName_fileName in inspector

Question

I've created a new create-react-app as a test to see if I can get the styled-components to show the component name and file name when debugging a component as I have tried adding this to multiple projects without any success.

I will outline my steps below:

1. Navigate to directory I want to create a new project in and npx create-react-app sc_test_app
2. cd sc_test_app and npm i styled-components
3. npm start to ensure that everything is working fine
4. Edit the App file with the following code:

import styled from "styled-components/macro";

const Wrapper = styled.div``;
const Header = styled.h1``;
const Text = styled.p``;

const App = ({ className }) => {
  return (
    <Wrapper className={className}>
      <Header>Header</Header>
      <Text>Text</Text>
    </Wrapper>
  );
};

export default App;

5. Inspect a component on my local. It still displays a hashed className
6. Create a .babelrc file and add in the following:

    "plugins": [
        ["babel-plugin-macros"],
        [
            "babel-plugin-styled-components",
            {
                "minify": true,
                "transpileTemplateLiterals": false,
                "pure": true,
                "displayName": true, // generate another classname
                "fileName": true, // generate another classname
                "preprocess": false,
                "meaninglessFileNames": ["index", "styles"]
            }
        ]
    ]
}

7. Inspect a component and it still shows a hashed className.

Answer 1

Try reverting styled-components to 5.2.1, it seems to be an issue with the versions above 5.2.1 at the moment. To do so open your terminal in the root directory of your project and execute npm install styled-components@5.2.1.