displayName doesn't work

[Lo Axhamre]

What I've done

1. Installed create-react-app
2. Added react-app-rewired, react-app-rewire-styled-components and styled-components
3. Tried both to use react-app-rewire-styled-components as is AND added config "displayName": true

Expected behaviour
In the browser dev tool, would like to have " nicer generated class names that include the components' name".

Result
The class names aren't changed, they have their default randomized look.
Demo

[Max Stoiber]

Can you post your config please? It works perfectly fine for us so it's most likely a usage issue.

[Lo Axhamre]

Hm, weird.

The config was in the demo:

const rewireStyledComponents = require("react-app-rewire-styled-components");

/* config-overrides.js */
module.exports = function override(config, env) {
  config = rewireStyledComponents(config, env, {
    displayName: true
  });
  return config;
};

And here are two screenshots of the

1. source code (styled component Message)
2. the resulting webpage
3. dev tools

Firefox 59

Chrome 65

[Max Stoiber]

Oh, you need to set up react-app-rewired properly by replacing react-scripts start in the package.json with react-app-rewired start, see https://github.com/timarney/react-app-rewired

[Lo Axhamre]

Oh 😳

Thank you very much. And sorry for taking up your time!

[Max Stoiber]

No worries, happy to help! Next time, you'd probably get a faster answer if you ask in the styled-components community though 😉