Styled-Components hydration issue

[The-Code-Monkey]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64 Binaries: Node: 16.15.0 npm: 8.5.5 Yarn: 1.22.15 pnpm: 6.11.0 Relevant packages: next: 13.0.2-canary.0 eslint-config-next: 13.0.2-canary.0 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

chrome

How are you deploying your application? (if relevant)

No response

Describe the Bug

I am using Styled-Components following the guide on the beta docs and i keep getting hydration issues. Also the pages im getting hydration issues on are client pages.

Expected Behavior

Shouldn't get hydration issues.

Link to reproduction

https://github.com/The-Code-Monkey/PaperCMS

To Reproduce

https://paper-cms.vercel.app/list/products

Click between products and dashboard.

[kkaplinski]

In my case I was able to resolve hydration issue by refactoring all of my links. According to documentation: https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-tag, if we want to use <a> tag as a child we need to add legacyBehavior prop to Link. If we decided to use new approach (without <a> tag as a child) we can extend Link styles with styled(Link)

[The-Code-Monkey]

I have a link tag without a child a tag I have a span. So the legacyBehavour shouldn't be needed

[The-Code-Monkey]

So i found where the hydration issue is coming from its coming from the app/layout.tsx file. When i remove the default HTML markup from that file i no longer get a hydration issue. Not sure because this is supposed to be here with next 13 but it works perfectly without i just get this new error instead.

Uncaught Error: invariant expected app router to be mounted

[evliu]

The interesting part for my project is that I'm using our UI lib that uses styled-components 5.3.6, and those hydrate fine when the next13 app uses styled-components 6-beta ServerStyleSheet, StyleSheetManager, but none of the SC6 components hydrate except for initial load while the SC5 ones do. If I use SC5 ServerStyleSheet, StyleSheetManager in the app, it doesn't hydrate at all

[The-Code-Monkey]

@evliu check out my repo I have styled hydrating but I do have other issues

[JohnMarsden24]

My comment on this issue might be helpful.

[The-Code-Monkey]

Nothing to do with your comment as far as I am aware as I have tried this already.

[huozhi]

Hi @The-Code-Monkey do you have a minimal reproduction with latest next canary? I tried to run your project but it requires more setup since you're using supabase.

Error: NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY env variables are required!

I noticed that the styled-components installed is v5, can you alias it to v6 beta by yarn resolution or sth? since it has better support for react 18.

[huozhi]

Can you try out the solution mentioned in the comment here https://github.com/vercel/next.js/issues/42526#issuecomment-1343263346?

Gonna close this issue as a duplicate for #42526

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.