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?

[dummdidumm]

We could also create the component instance as something that isn't proxied, i.e. a class, though that may bloat the bundle for a real edge case.
Maybe the best solution is to issue a dev time warning which checks for the proxy symbol on the object if it's not found. If there's a proxy symbol we issue a warning along the lines of "do not proxy component instances, unmount needs the original reference to them"

[pranav200408]

Hi, I'd like to work on this issue.

[dummdidumm]

Feel free to open a PR with the "warn in dev mode" solution!

[7nik]

I think we can do

if (!fn && component) {
  fn = mounted_components.get(component[STATE_SYMBOL]);
}

to de-proxify the reference.

[Rich-Harris]

Why do you need componentInstance be stateful?

I also have this question

[tbashiyy]

I'm sorry for late response to this issue.

Why do you need componentInstance be stateful?
I also have this question

Actually, I wrote code re-mount component instance in Attachment.
Because I didn't know how to update component props of mounted Component Instance at that time.
(Currently, I know how to update component props.😅)

Why I created this issue that I didn't expect that compnent Instance doesn't call unmounted method in this case. I think this is unintentional behavior for user and it maybe leads memory leak.