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

styled-components / babel-plugin-styled-components

Improve the debugging experience and add server-side rendering support to styled-components

MIT License

1.07k stars 140 forks source link

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

Closed yurkimus closed 3 years ago

yurkimus commented 3 years ago

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
ssr option just ignored (collected style sheet included in server response)
endless warning about mismatching classnames

How to resolve all of this issues?

versions:

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

sumitduggal commented 3 years ago

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 3 years ago

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

yurkimus commented 3 years ago

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