Svelte 5 - events lost after action update

[proof-llc]

Describe the bug

A lot of bugs in melt-ui have been fixed - there's just one left. It occurs when we run:

const {
  actions: { portal }
} = createToaster();

<div use:portal>
  <button on:click={() => console.log('THIS DOES NOT RUN IN SVELTE 5')}>INSIDE PORTAL </button>
</div>

portal is using svelte/actions. i have removed melt-ui and was able to replicate using actions directly.

Reproduction

• pnpm i && pnpm dev: https://github.com/proof-llc/melt-ui-demo (ignore name - latest push is not using melt-ui)
• The project is using svelte 5 - if you downgrade to svelte 4 it works.

Logs

No errors or warnings displayed

System Info

System:
    OS: macOS 14.1
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.2.0 - /usr/local/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
    pnpm: 8.10.5 - /usr/local/bin/pnpm
    bun: 1.0.2 - ~/.bun/bin/bun
  Browsers:
    Chrome: 119.0.6045.159
    Chrome Canary: 120.0.6089.3
    Safari: 17.1
    Safari Technology Preview: 17.4
  npmPackages:
    svelte: 5.0.0-next.8 => 5.0.0-next.8

Severity

blocking an upgrade

[proof-llc]

issue persists with 5.0.0-next.9

[kuechlerm]

This is also a huge blocker for the migration of ... all my apps.
I use this action for a Portal

function portal(node: HTMLElement) {
		function update() {
			document.body.appendChild(node);
			node.hidden = false;
		}

		function destroy() {
			if (node.parentNode) {
				node.parentNode.removeChild(node);
			}
		}

		update();

		return {
			update,
			destroy,
		};
	}

<div use:portal hidden>
	<slot />
</div>

(The usage is the same as above)

I cannot reproduce the error in the REPL

[proof-llc]

I also cannot reproduce in the REPL (not sure why - here's my version of it) but when running locally with pnpm dev it doesn't work.

[kuechlerm]

Using the new snippets and @render stuff instead of a slot, I also get no error in the REPL.

Update: It does not cause the error anymore but the basic problem is still there.

I created a minimal repo: https://github.com/kuechlerm/portal_error

• pnpm i && pnpm dev
• open http://localhost:5173/
• click button in blue div
• nothing is written to the console

But I get an error in my local dev environment:

ERR_SVELTE_HYDRATION_MISMATCH: Hydration failed because the initial UI does not match what was rendered on the server. TypeError: Illegal invocation
at Module.sibling (operations.js:206:40)
at +page.svelte:13:22
at Portal.svelte:21:19
at render.js:3171:3
at execute_signal_fn (runtime.js:287:67)
at execute_effect (runtime.js:427:29)
at schedule_effect (runtime.js:509:3)
at internal_create_effect (runtime.js:1138:3)
at render_effect (runtime.js:1253:9)
at Module.snippet_effect (render.js:3170:2)

[dummdidumm]

Closing as duplicate of #9777 which was fixed already