ThemeProvider from next-themes cannot be used in root.tsx (hydration-mismatch) | Remix | Page 1

noble mantle Jun 9, 2025, 11:16 AM

#

I put ThemeProvider from next-themes into <body> in the Layout component in root.tsx:

    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>

and it started triggering the following error:

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:

Any clue?

noble mantle Jun 11, 2025, 10:00 AM

#

Someone?

lofty flume Jun 11, 2025, 11:47 AM

#

i wouldn't expect it to work with react router since it's made for next.js, maybe try https://github.com/abereghici/remix-themes

noble mantle Jun 11, 2025, 1:40 PM

#

lofty flume i wouldn't expect it to work with react router since it's made for next.js, mayb...

Thanks! Well, I thought next-themes is a react and framework agnostic thing. While it was maybe once made for next, I used it outside of it.
But it's great to see an alternative anyway

#

!close

#

hm

#ThemeProvider from next-themes cannot be used in root.tsx (hydration-mismatch)