styled-components/babel-plugin-styled-components

plugin's configuration doesn't work with custom .babelrc in NextJs

yurkimus opened this issue · 3 comments

yurkimus commented

I have installed in my project: "babel-plugin-styled-components": "^1.12.0"

Followed by documentation I created custom .babelrc file:
"plugins": [ [ "styled-components", { "ssr": false, "displayName": true, "preprocess": true } ]

results:

  • There is no display name
    image

  • ssr option just ignored (collected style sheet included in server response)
    image

  • endless warning about mismatching classnames
    image

How to resolve all of this issues?

versions:

"next": "^10.2.0"
"styled-components": "^5.3.0"
sumitduggal commented

are you trying to Server side render this app? If so the classnames generated on server side does not match with clientside after hydration, hence you see this error.
try changing you babel config to "plugins": [ [ "styled-components", { "ssr": true, "displayName": true } ]

quantizor commented

I think you'd still need to add next/babel to presets for a custom babel config?

  • 👍1
  • 👎1
yurkimus commented

I just migrated to "emotion" because "styled" plugin doesn't work as expected