Currently, I am learning Svelte 3 from an amazing tutorial that can be found here. In light of this, I decided to create a tab component as shown below:
<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>
Furthermore, I proceeded to import this tab component into my parent component, 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} />
Upon compiling Svelte without any errors, both the active and non-active tabs rendered correctly. However, upon clicking a tab, an error message appeared:
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)
At this point, I am curious as to what could possibly be causing this error and how I can go about resolving it?