This is a very tricky one. When as is passed to a component that uses basic styled-components notation in the NextJS app, it causes hydration errors in dev mode. Somehow it doesn't trigger on the first load in the reproduction, but after changing the code it sticks until the server is restarted. In the actual app it triggers every time, even without changes. I may have messed up the setup somewhere because it looks very strange.
Using the standard setup guide for styled-components in NextJS, create *any*Box component, pass any as and trigger fast-refresh with typing anything to the code, then look at the console.
🐛 Bug Report
This is a very tricky one. When
as
is passed to a component that uses basic styled-components notation in the NextJS app, it causes hydration errors in dev mode. Somehow it doesn't trigger on the first load in the reproduction, but after changing the code it sticks until the server is restarted. In the actual app it triggers every time, even without changes. I may have messed up the setup somewhere because it looks very strange.next.config.js
Styles:
Using as:
Result:
To Reproduce
Using the standard setup guide for styled-components in NextJS, create
*any*Box
component, pass anyas
and trigger fast-refresh with typing anything to the code, then look at the console.Expected behavior
Using styled notation doesn't create errors.
Link to repo
https://github.com/burningyouth/sc-nextjs-repr