HMR breaks component instance functions like $on #16552
Description
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.3527Severity
annoyance