Mixing old (on:click) and new syntaxes for event handling is not allowed — Svelte 5 uses onclick + callback props

DOM events:

<!-- before -->
<button on:click|preventDefault={handler}>Save</button>
<!-- after -->
<button onclick={(e) => { e.preventDefault(); handler(e); }}>Save</button>

Component events (child):

<!-- before -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
</script>
<button on:click={() => dispatch('inflate', 5)}>inflate</button>

<!-- after -->
<script>
  let { inflate } = $props();
</script>
<button onclick={() => inflate(5)}>inflate</button>

Parent: <Pump on:inflate={(e) => size += e.detail} /> becomes <Pump inflate={(power) => size += power} />. The payload is passed directly instead of through .detail. To forward an element event, accept an onclick prop and spread {...props} (put local handlers after the spread). Use onclickcapture for capture.