Skip to content

Hydration errors when using React Compiler in Next.js #859

@callumgare

Description

@callumgare

First thanks for the great library, I've always wished react had a better styling story similar to vue.

React Compiler is now stable in Next.js 16 but using it with styled-jsx results in hydrations errors:

A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. This won't be patched up. This can happen if a SSR-ed Client Component used: 

It seems like styled-jsx created class names are added server side but not client side (or possibly the other way round).

I've created a reproduction example here: https://codesandbox.io/p/devbox/quirky-sea-forked-gxhzym?workspaceId=ws_32JKZYd2T1VBPZg1gzYUpy

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions