Svelte 5: If block's presence inside an element which is targeted by mount or createRoot function causes hydration error.

[HighFunctioningSociopathSH]

Describe the bug

If there is an if block inside an element which is being targetted by mount or creatRoot functions. as soon as these functions are run Svelte throws a hydration error.

Reproduction

Let's say we have a simple component like bellow

// Test.svelte
<svelte:options runes />

<script lang="ts">
  let { className } = $props<{ className?: string }>();
</script>

<div class={className}></div>

and in our page we have the following code

<svelte:options runes />

<script lang="ts">
  import RippleEffect from "$components/Ripple/RippleEffect.svelte";
  import { mount } from "svelte";

  let div = $state<HTMLDivElement>();

  function handleClick() {
    if (!div) return;
    mount(RippleEffect, {
      target: div,
      props: { className: "something" }
    });
  }
</script>

<div bind:this={div}>
  {#if true}
    <!-- any condition -->
  {/if}
</div>

<button onclick={handleClick}>button</button>

As soon as you click on the button to create a new Test component inside that div you get a hydration error. Note that this will still happen even if we don't pass any props at all.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 5.25 GB / 15.63 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.7.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (121.0.2277.98)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^5.0.0-next.45 => 5.0.0-next.45

Severity

blocking an upgrade

[dummdidumm]

Why do you mount a component to something that already has content? Could give more details on the use case?

Right now mount and createRoot automatically go into hydration mode if they detect an element inside the target anchor. When we remove createRoot and introduce hydrate this shouldn't be the case anymore / you'll have more control over it. Related #10375

[dummdidumm]

mount now just inserts itself, that hydration error no longer occurs.