Warning: hydration_mismatch

[triadmoko]

I often get this warning in my terminal, sometimes it disappears and sometimes it appears. However, I don't find anything strange in the UI display or in my browser log. What should I do so that this warning does not appear.

node_invalid_placement_ssr: `<button>` (src/lib/components/ui/button/button.svelte:66:1) cannot be a child of `<button>` (node_modules/bits-ui/dist/bits/utilities/floating-layer/components/floating-layer-anchor.svelte:34:2)

This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.

[huntabyte]

You are probably putting a Button directly inside of a Trigger and not using the child snippet.

[triadmoko]

thanks hunter

[robsyc]

I'm getting this issue on the dialog example

Fixed it like this:

<Dialog.Trigger>
    {#snippet child({ props })}
        <div {...props} class={`${buttonVariants({ variant: "ghost", size: "icon" })} w-8 h-8 flex items-center justify-center`}>
            <BotMessageSquare />
        </div>
    {/snippet}
</Dialog.Trigger>