Describe the bug

compilerOptions.compatibility.componentApi should enable access to these functions, but HMR seems to break this (as found by @paoloricciuti).

Reproduction

Repository or ...

in a Svelte 5 project (e.g. created via sv create), enable component compatibility:

// svelte.config.js
const config = {
	compilerOptions: {
		compatibility: {
			componentApi: 4,
		},
	},
	// ...

<!-- src/routes/+page.svelte -->
<script lang="ts">
	import Dialog from './dialog.svelte';

	function onOpenDialog() {
		const dialog = new Dialog({
			target: document.body,
			props: { /* ... */ },
		});
		dialog.$on('close', () => {
			alert('Dialog closed');
			dialog.$destroy();
		});
	}
</script>

<button on:click={onOpenDialog}>Open Dialog</button>

<!-- src/routes/dialog.svelte -->
<script lang="ts">
	import { createEventDispatcher } from 'svelte';

	const dispatch = createEventDispatcher();

	function close() {
		dispatch('close');
	}
</script>

<dialog on:close={close} open>
	<form method="dialog">
		<p>Dialog opened via client-side component API.</p>
		<button>Close</button>
	</form>
</dialog>

• Run vite dev
• Click button on root page

Disabling HMR via compilerOptions.hmr = false fixes the issue.

Logs

page.svelte:20 Uncaught TypeError: dialog.$on is not a function
    at HTMLButtonElement.onOpenDialog (+page.svelte:20:10)
    at chunk-WYIA4HQE.js?v=00abcf1b:3805:25
    at without_reactive_context (chunk-WYIA4HQE.js?v=00abcf1b:3761:12)
    at HTMLButtonElement.target_handler (chunk-WYIA4HQE.js?v=00abcf1b:3804:14)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 10.25 GB / 31.69 GB
  Binaries:
    Node: 22.12.0 - ~\AppData\Local\Programs\NodeJS\node.EXE
    Yarn: 1.22.22 - ~\AppData\Local\Programs\NodeJS\yarn.CMD
    npm: 10.9.0 - ~\AppData\Local\Programs\NodeJS\npm.CMD
  Browsers:
    Edge: Spartan (), Chromium (129.0.2792.79), ChromiumDev ()
    Internet Explorer: 11.0.22621.3527

Severity

annoyance