Search code examples
sveltesveltekit

hydration_mismatch on Svelte app when head and body are empty

I'm getting a hydration_mismatch issue on my Svelte app even when the body and head are completely empty. I attempted to narrow down when the warning occurs but it only seems to go away when both my head and body tags are removed from page.svelte. Does anyone have any idea where the issue may be occurring?

enter image description here

I put a breakpoint to pause on uncaught and caught exceptions and this is where it stops at:

enter image description here

app.html:

<!doctype html>
<head>      
    %sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
    <div style="display: contents">%sveltekit.body%</div>
</body>

layout.svelte:

<script>
   import '../app.css';
   let { children } = $props();
</script>
{@render children()}

page.svelte:

<head></head>
<body></body>
Solution

  • You cannot add <head> or <body> in a page or layout.
    There can only be one each and they have to be in app.html (where they already are).

    The browser will repair the broken HTML by removing the redundant elements which will then lead to the hydration mismatch because the client code expects the elements which now are gone.

    Regular page and layout contents end up in <body>. If you want to add more stuff to the <head>, use the special element <svelte:head>.