upgraded our SvelteKit app and now hydration errors appear on several pages:
the common factor seems to be a random ID on a form, before teh upgrade we didnt see warnings, or maybe they were just quieter... i want to fix the root cause rather than silence it... what are the usual sources of mismatches and how do u fix each one? detailed answers welcome, Im happy to refactor if it fixes things proprely.
ahh right still happens in a private window, so it's my code, not an extension. hope thats enough info 😅
ahh classic for IDs on forms and labels, use teh frameworks stable ID helper instead of Math.random(). in Svelte 5 thats $props.id() (in React its useId()), which produces matching IDs on server and client.
oof dates usually mismatch because the server runs in UTC and the browser in the users time zone, or because locales differ. Format dates with an explicit time zone and locale, or render the date on the client only. In SvelteKit, set the value in onMount (or wrap it in {#if browser}) so it only renders on the client. (suppressHydrationWarning is a React thing, Svelte doesnt have it.) lmk how it goes
@nell.becker Switched to useId for the form IDs and the warnings disappeared. Such a small change. u guys are the best!!!
Sign in or create an account to reply.
