[RESOLVED] Hydration Issue with Clerk, TSS, & Convex
Morning team,
I thought this issue would have been resolved upgrading to the new main branch, but seeing this hydration issue with Clerk, TSS, and Convex. Any thoughts on how I can resolve this?
I thought this issue would have been resolved upgrading to the new main branch, but seeing this hydration issue with Clerk, TSS, and Convex. Any thoughts on how I can resolve this?
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:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<OrganizationProvider organization={undefined}>
<SWRConfig value={undefined}>
<ConvexProviderWithClerk client={{address:"h...", ...}} useAuth={function useAuth}>
<ConvexProviderWithAuth client={{address:"h...", ...}} useAuth={function useAuthFromClerk}>
<ConvexAuthStateFirstEffect>
<ConvexProvider client={{address:"h...", ...}}>
<RootDocument>
<html
lang="en"
- className="light"
- style={{color-scheme:"light"}}
>
...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:
- A server/client branch `if (typeof window !== 'undefined')`.
- Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
- Date formatting in a user's locale which doesn't match the server.
- External changing data without sending a snapshot of it along with the HTML.
- Invalid HTML tag nesting.
It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
https://react.dev/link/hydration-mismatch
...
<OrganizationProvider organization={undefined}>
<SWRConfig value={undefined}>
<ConvexProviderWithClerk client={{address:"h...", ...}} useAuth={function useAuth}>
<ConvexProviderWithAuth client={{address:"h...", ...}} useAuth={function useAuthFromClerk}>
<ConvexAuthStateFirstEffect>
<ConvexProvider client={{address:"h...", ...}}>
<RootDocument>
<html
lang="en"
- className="light"
- style={{color-scheme:"light"}}
>
...
