[Compiler Bug]: 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

[egorBezmen]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

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

Repro steps

1. npm install
2. npm run dev
3. open localhost

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

How often does this bug happen?

Every time

What version of React are you using?

18.3.1 / 19.0.0

What version of React Compiler are you using?

19.0.0-beta-27714ef-20250124