Estoy aprendiendo svelte 3 de este gran tutorial. Así que creé un componente de pestaña como:

 <script> import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher; export let items; export let activeItem; </script> <ul class="tab tab-block"> {#each items as item} <li on:click={() => dispatch("tabChange", item)}> <div class:active={item === activeItem}> {item} </div> </li> {/each} </ul>

Y lo importé al componente principal Projects.svelte:

 <script> import Tabs from "./Tabs.svelte"; let items = ["Projects", "Users"]; let activeItem = "Projects"; //... const tabChange = (e) => { activeItem = e.detail; }; </script> <Tabs {activeItem} {items} on:tabChange={tabChange} />

Veo que svelte se compila sin errores y las pestañas activas y no activas se muestran bien. Sin embargo, cuando hago clic en una pestaña, aparece este error:

 index.mjs:938 Uncaught Error: Function called outside component initialization at get_current_component (index.mjs:938) at createEventDispatcher (index.mjs:954) at Array.click_handler (Tabs.svelte:10) at HTMLLIElement.click_handler (Tabs.svelte:12)

Me pregunto qué podría estar mal y cómo puedo solucionarlo.