Adding theme preload causes hydration error #1038
-
|
Adding the theme preload logic form this example causes a hydration error, I'm using the base create starter, what code am I missing from the example? https://github.com/JesseKoldewijn/waku-tw4-shadcn-starter/blob/main/src/middleware/themePreload.ts Error: |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
middleware that changes the rendered result before it reaches the client will cause a hydration error you could use suppressHydrationError in this case since you are deliberately making the change between the client and server: https://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors It might be better though to set the theme preload in your RSC with import { unstable_getHeaders } from 'waku/server';
...
<html lang={"${lang}"} class={themeFromHeaders}>you'll need to use the root element api too: https://waku.gg/blog/root-element-api hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
Yes, suppressHydrationError felt a bit hack-y. Thank you for the idea, I'll try with getHeaders. |
Beta Was this translation helpful? Give feedback.
-
|
The root element api did it, I missed it in the docs. Appreciate the help! |
Beta Was this translation helpful? Give feedback.
middleware that changes the rendered result before it reaches the client will cause a hydration error
you could use suppressHydrationError in this case since you are deliberately making the change between the client and server: https://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors
It might be better though to set the theme preload in your RSC with
unstable_getHeadersinstead of needing the middlewareyou'll need to use the root element api too: https://waku.gg/blog/root-element-api
hope this helps!