Cannot call `unmount` method with using Attachment and $state

[tbashiyy]

Describe the bug

In Attachment, mount component programmatically like below.

const attachement: Attachement<HTMLElement> = (element) => {
	let componentInstance = $state<ReturnType<typeof mount>>();
	const target = document.createElement('div');
	componentInstance = mount(Component, { target }); // if use component instance with $state, cannnot call unmount.
	// const componentInstance = mount(Component, { target }); // This is works

	return () => {
		console.log('hidden attachement');
		if (componentInstance) {
			// This warning appears in console on calling this.
			//
			// [svelte] lifecycle_double_unmount
			// Tried to unmount a component that was not mounted
			// https://svelte.dev/e/lifecycle_double_unmount
			//
			void unmount(componentInstance);
		}
	}
}

Then use this like below

<button onclick={() => visible = !visible}>Toggle `hello`</button>

{#if visible}
	<h1 {@attach attachement}>hello</h1>
{/if}

If visible changes to false, attachement teardown is called.
But unmount(componentInstance is not works.
And this warning is appear.

[svelte] lifecycle_double_unmount
Tried to unmount a component that was not mounted
https://svelte.dev/e/lifecycle_double_unmount

Workaround

If use componentInstance without $state, it works.

// NG
let componentInstance = $state<ReturnType<typeof mount>>();
const target = document.createElement('div');
componentInstance = mount(Component, { target });

// OK
const target = document.createElement('div');
const componentInstance = mount(Component, { target });

Reproduction

https://svelte.dev/playground/hello-world?version=5.38.2#H4sIAAAAAAAAE51UXYvbMBD8K1u1EAeMfX3oS84xLaXQQgul5K0-WkVex6KyZKx10sP4vxdJsePcBxx9CFak3Z3RaHYHpnmDbMN-YNuZshckjQZTwb4_2Ogj19oQCK4U9LoxvSZokGpTwklSDZyIi7pBTcB1CW8sccL1LYtZJRVatvk5MLpvXX23weIJ7UPbJvaIitzenlt8al8YTajJsg3LrOhkS6C4PmwLRrZgeaELkk1rOoIBPLd4JjlC1ZkGVqHW6nYR-9E0rdGOcghJ0nknWYa7n0KCo7RyrxC25-tF1PW4diG6IGG0pbMM6HTYwIfLn-zz7tvXT8qvc9hChGG9hm0OgwfxEGIi8EVb4lpcwLIfSH2nd_ctZk5IU4Wb5nm0DizPFIh3ByTYQmlE7zAS0SEnPKNHq1IeV5eUx3i-bDRLEcMw1RzXt5CmICvoLV64gpySvRUC3xgE1488kwTYNIVA9r_wd7W0IC2cTPfHBvUL6rw8EC0VDZIYhYkyh2hVy7JEPb-RplmGgmQF0SMy60shz9kDn3gntdQH4G2LvLMgNZxhwGh_W3dKtbTJMvuq0s_grztQskJxLxT-Kk2_V_jrLNQ1biexBDKzqflCfKo5wYlbcFr7Yyyvsmui1m7SNEAmJR5TTF-Ce1kfjSwn8CdkmlUcw8J_xkJnaWhW16A6a_PvCrlFIHM4KPeBWpYIv2tUyvyO_eCwiJOaSZa2IXPfE7lZpIWS4s92CI98acdX5-WY70Lpc8ksDZm-yvBaVlOOJ5jVb2F4H9ywbNwx99lZWr_NCz2kshpZzAj_Etu4jh_jZ0bZw-lxPdCeOH3BWHuDVYWCoitfX7k6OELUUpUXPy_ngWywgy1YpJ1s0PQPij1sEnf3UC6kvpqrjjG8u7m5mSbecz3nmnvZ-q4TgJB3pTnpJzF9mFDIO6i0byIPPxtt0ac-arqH57dees4FPnTd4kbOUddveRcz4lKdpC7ZpuLK4vgPJjYBlgkHAAA=

Logs

System Info

System:
    OS: macOS 15.6.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 68.94 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 24.3.0 - ~/.nodenv/versions/24.3.0/bin/node
    npm: 11.4.2 - ~/.nodenv/versions/24.3.0/bin/npm
    pnpm: 10.14.0 - ~/.nodenv/versions/24.3.0/bin/pnpm
  Browsers:
    Chrome: 139.0.7258.139
    Safari: 18.6

Severity

annoyance

[hanielu]

@tbashiyy you can use $state.raw REPL

[7nik]

The problem is that $state proxifies componentInstance so it becomes another reference, and thus the component cannot be unmounted.
The solution is to use $state.raw or no rune at all.
Why do you need componentInstance be stateful?