svelte:component with bind:this causes bind:this to be set to null even after new component is already mounted

[laszlokorte]

Describe the bug

When using bind:this to get a reference to a mounted component <svelte:component this={someComponent} bind:this={someRef} /> and then switching the value of someComponent (causing a remount), someRef will be updated twice. first being set to the new mounted component and then afterwards to null.

It only seems to happen if the old components does not export any functions but the new component does.

This happens only in production builds (vite build), not in dev build (vite dev)

For me it seems like this happens to late (or should not happen at all?):
https://github.com/sveltejs/svelte/blob/main/packages/svelte/src/internal/client/dom/elements/bindings/this.js#L54

Reproduction

This is an example where it happens. BUT NOT in the online editor version, only when running vite build locally:
https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACr1UTY-bMBD9KxatFNAiWG3VC0uQQk57qtRDL5s9GGdQ3AWDbBMFIf_32piP7JKN0g_1QGJmnt943jzTOTktQDjRc-cwXIITOZu6dnxHtrV5EUcoJOh3UTWcmEgsCKe1THZsJ2lZV1yibaX_GTC5QTmvSrQKwjkUWIrVJXy6xKfX8NslfnuG1ztIxYREZMwKtEadietMNK520m6Jzoj9MVVjjkuhsTj64qMselA2owYEvkazWdKcDE27oMmu0aQ3nkad99xDQQI_6_kUoa9-q7eOaGmeAqxCGvdZSCzBXZGV9zilGs71IZ40KWYEZlTD9pBTBvsey-JwdgKLBRRAJMoo20dHXDSw7kwN1fuk-wSYHNC37KfGBK_QCncekYewQGRoLK5qSSuGRgqV6CcObdRyhYZL9fX7mn19_Zo1UuqdFSMFJa_rzvXQOkEdzd13HQUcBEgPdRfjrqeUSr6b5SjFNJlMxqEtY5s-8KF5O8GpJyuDPFCxfl9EId3-oA0aEJMUz2b5MjhaoS4IgkXSWkKhMNG3sqz2NKewdyLJG1D-dIlnS956l62LRuP4bW8ZM_yaV7VwrT9GjxxnV9x7Q0L_wqm_r3nDSD_FQdCR1ey6H6z41j2Hh8ScGG3iUC9N6GTujjJXB3Vtb_S4Tn4YV6CNDh21Kerk46kf7-6U9d4TIxxKBtLUHIZ3k3LpHymH_ez3lPtrzdJJM_Ntwsp8J7rsrWTp_5Fs-48lu9zw9qOGl2d8Ub8ACbMhwuEGAAA=

This is the same example compiled with vite build:
https://static.laszlokorte.de/svelte-debug/

Try to use the select box to first select component D, which does not export any functions, then switch back to component A. See the browser console to observe how the null value is logged last.

This is the exact project the example was built from.
https://github.com/laszlokorte/svelte5-debug-component-binding/blob/main/src/App.svelte#L39

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 16.26 GB / 31.93 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.2.5 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.4 - ~\AppData\Local\Microsoft\WinGet\Links\pnpm.EXE
  Browsers:
    Edge: Chromium (126.0.2592.87)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    svelte: ^5.0.0-next.1 => 5.0.0-next.173

Severity

blocking an upgrade

[laszlokorte]

On discord someone suggested to add $effect(()=>()=>console.log("unmounted D")); to component D.

With vite build this leads to the following logs in the browser console when switching from component D to B:

unmounted D
bind:this gets set to new component (B)
bind:this get set to null

With vite dev this leads to the following logs in the browser console when switching from component D to B:

unmounted D
bind:this gets set to new component (B)

[laszlokorte]

@paoloricciuti on discord helped me to track down this issue. The core issue seems to be that I am using a $state.frozen state with a get/set wrapper for the bind:this value. Using a simple $state() solves the issue. But it would be great if $state.frozen would also work.