styled-components Hydration failed with react-compiler

[egorBezmen]

Link to the code that reproduces this issue

https://github.com/egorBezmen/next15-styled-components

To Reproduce

1. npm install
2. npm run dev

Current vs. Expected behavior

the error occurs during local development if you enable react-compiler

Unhandled Runtime Error
Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.2.0: Fri Dec  6 19:01:59 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.12.0
  npm: 10.5.0
  Yarn: N/A
  pnpm: 9.15.3
Relevant Packages:
  next: 15.2.0-canary.27 // Latest available version is detected (15.2.0-canary.27).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.7.3
Next.js Config:
  output: N/A

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

Runtime

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

next dev (local)

Additional context

https://github.com/vercel/next.js/tree/canary/examples/with-styled-components
I deployed the template project and enabled the option react-compiler
codesandbox - https://codesandbox.io/p/github/egorBezmen/next15-styled-components/main?import=true

[uvansh]

I resolved the issue it was occurring due to missing next.config.js file which is need by the CSS-In-JS

[egorBezmen]

please add react-compiler to next.config.js, you can also see error in your fork repo

[uvansh]

But nextjs uses rust based compiler, and as far I have researched the reactCompiler is under experimental and is not recommended for production.
Although you can do this by using bable plugin.
.
https://nextjs.org/docs/app/api-reference/config/next-config-js/reactCompiler

[egorBezmen]

babel plugin has been installed - https://github.com/egorBezmen/next15-styled-components/blob/main/package.json#L9

[samcx]

@egorBezmen Does this issue work fine without toggling on the React Compiler?

[egorBezmen]

@samcx 👋
yes, but if I turn on React Compiler, I see this error

[aldiabdumalik]

I experienced it too

[stas-raranetskyi]

Hi, any updates here?