Styled components example provided in the docs causes hydration errors even when rendering nothing

coravacav commented 10 months ago

Link to the code that reproduces this issue

To Reproduce

Create a new application, install styled-components, follow the instructions found here for styled-components, run the app with the appropriate modifications (and something in the page), see the error shown.

Current vs. Expected behavior

I expect no hydration errors from following the documentation instructions on setting up styled-components.

Verify canary release

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

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 14.0.4-canary.42
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

It breaks with or without styledComponents: true in the config file's compiler options.

coravacav commented 10 months ago

I noticed the sandbox sometimes doesn't fire the error the first time it loads, I am not sure why (possibly because I also get an error saying it switches to full client rendering). This is what I get on a refresh (in the code sandbox browser)

coravacav commented 10 months ago

Due to an extension. Apologies. Required testing in a whole other browser to confirm

coravacav commented 10 months ago

After even more investigation (apologies for the rapid re-open / close) it seems like that actually was not the issue and it's still occurring in the app. The code sandbox is reproducible once there's a <head> and the head contains any <link>.

Both the original post and this comment come with a new link that accurately reproduces the issue.

Apologies once more.

new codesandbox

vercel / next.js