styled-components don't rehyrdate properly in React Server Components #66646
Labels
bug
Issue was opened via the bug report template.
Developer Experience
Issues related to Next.js logs, Error overlay, etc.
Documentation
Related to Next.js' official documentation.
linear: next
Confirmed issue that is tracked by the Next.js team.
Comments
github-actions
bot
added
Developer Experience
|
Looks like the tag keeps emitted while resolving suspense boundaries and the new styles are inserted later. // src/lib/registry.tsx
const flushRef = useRef(false);
useServerInsertedHTML(() => {
const styles = styledComponentsStyleSheet.getStyleElement();
// Flush initial styles
if (!flushRef.current) {
flushRef.current = true;
return <>{styles}</>;
}
return null;
})I tested a bit comparing to styled-components 6.0.x, it seems like a behavior change that we don't need to insert extra styles anymore and styled-components could manage the incoming styles itself. |
|
Thanks for the response @huozhi. Unfortunately this solution doesn't work entirely for more complex use cases, as you get a flash of unstyled content before the suspense boundaries resolve. |
github-actions
bot
added
the
linear: next
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Link to the code that reproduces this issue
https://github.com/blairmcalpine/styled-components-repro
To Reproduce
This second green style is the result of two conflicting <style> tags generated by styled-components. One is generated on the initial doc request, and the second (and third) are adding during hydration - see the style tags marked with
data-styled-version="6.1.11":This can lead to completely incorrect styles of the page, if the second style tag contains different styles than the one in the head. While this issue is primarily with React Streaming and styled-components, we want to raise awareness here as NextJS officially "supports" styled-components, and the supported implementation doesn't work properly.
Current vs. Expected behavior
Expected Behaviour:
I expect styled-components <style> tags that are added later as a part of React Server Component hydration to be properly consolidated with the existing <style> tag.
Current Behaviour:
The <style> tag that is added to the DOM as a part of React Server Component hydration isn't combined with the <style> tag in the head, resulting in conflicting styles. Note that this is using the code from the docs.
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.5.0: Wed May 1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000 Available memory (MB): 32768 Available CPU cores: 10 Binaries: Node: 20.12.0 npm: 10.5.0 Yarn: 1.22.22 pnpm: N/A Relevant Packages: next: 14.2.3 eslint-config-next: 14.2.3 react: 18.3.1 react-dom: 18.3.1 typescript: 5.4.5 Next.js Config: output: N/AWhich area(s) are affected? (Select all that apply)
Developer Experience, Documentation
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local), Other (Deployed)
Additional context
I have created a related issue with styled-components here.
The text was updated successfully, but these errors were encountered: