Can't disable hydration warning

[jdgamble555]

Describe the bug

I cannot seem to disable the hydration warning.

I have tried:

<!-- svelte-ignore hydration_html_changed hydration_mismatch -->

before the problematic line.

Also the compile option:

compilerOptions: {
	warningFilter: (warning) => warning.code !== 'hydration_mismatch'
}

And no avail.

This says I should be able to use svelte-ignore.

https://svelte.dev/docs/svelte/runtime-warnings#Client-warnings-hydration_html_changed

Reproduction

My basic repo example uses the hydration_mismatch error, but it also seems to be a problem with hydration_html_changed.

https://github.com/jdgamble555/svelte-hydration-error/blob/master/src/routes/%2Blayout.svelte

I can't post a REPL since it doesn't support TS nor SvelteKit. However, here is SvelteLab:

https://github.com/jdgamble555/svelte-hydration-error

https://www.sveltelab.dev/xk6xs8394ns4ox5?files=.%2Fsrc%2Froutes%2F%2Blayout.svelte

You can't really see anything until you inspect the console.

Related to:
svecosystem/mode-watcher#99
svecosystem/mode-watcher#95

Logs

+layout.svelte:6 [svelte] hydration_mismatchHydration failed because the initial UI does not match what was rendered on the serverhttps://svelte.dev/e/hydration_mismatch

System Info

New SvelteKit Project.

Severity

annoyance

[dummdidumm]

hydration_mismatch is not something you can ignore. It's a warning that tells you that everything had to be thrown away and rerendered on the client because the browser did repair the HTML because it's invalid. In your case it's invalid because you are rendering a div into the head, that is forbidden. I don't know exactly what you want to accomplish, but if this element needs to go into the head, use an element that is valid in there

[jdgamble555]

@dummdidumm - Shouldn't the docs make this clear that this cannot be disabled?! According to the docs, you can disable all types of warnings.

There is a clear use case for this. If you get the dark mode from the local storage, the html needs to get updated without a flicker. If you update the dom inside onMount, there will be a flicker.

This is how many UI libraries do this, including svelte-shadcn.

You can already do this, there just needs to be a way to silence the warning, as again, the docs say you can do.

This isn't about whether or not you should do this, this is about disabling the warnings, which you SHOULD be able to do.

J

[jdgamble555]

@dummdidumm - Do you want me to create a new issue as hydration_html_changed is the real issue here?

J

[dummdidumm]

Put a comma between the two warning codes and it will tell you that the hydration_mismatch one cannot be disabled.
In other words the syntax for disabling multiple comments at once was wrong.

That html hydration warning is correct and it can also be disabled.

And again, the problem is not that it's in the head, the problem is that you are putting an invalid html tag into the head. A div cannot exist inside a head.

[jdgamble555]

Got it fixed. Thanks.

https://github.com/jdgamble555/svelte-hydration-error