Uncaught (in promise) Error: this={...} of <svelte:component> should specify a Svelte component.

[NubbDev]

I don't get what I did wrong. I'm getting this runtime error. Uncaught (in promise) Error: this={...} of <svelte:component> should specify a Svelte component.

package.json

{
  "name": "frontend",
  "version": "0.0.0",
  "description": "",
  "type": "module",
  "scripts": {
    "dev": "vite dev --host",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
    "tauri": "tauri"
  },
  "license": "MIT",
  "dependencies": {
    "@tauri-apps/api": ">=2.0.0-rc.0",
    "@tauri-apps/plugin-shell": ">=2.0.0-rc.0",
    "svgo": "^3.3.2"
  },
  "devDependencies": {
    "@poppanator/sveltekit-svg": "^4.2.1",
    "@sveltejs/adapter-static": "^3.0.1",
    "@sveltejs/kit": "^2.0.0",
    "@sveltejs/vite-plugin-svelte": "^3.0.0",
    "@tauri-apps/cli": ">=2.0.0-rc.0",
    "svelte": "^4.2.7",
    "svelte-check": "^3.6.0",
    "tslib": "^2.4.1",
    "typescript": "^5.0.0",
    "vite": "^5.0.3"
  }
}

<script lang="ts">
    import FilledHouse from '$lib/assets/icons/house-blank-filled.svg?component';
    import LinedHouse from '$lib/assets/icons/house-blank.svg?component';
    import FilledCalendar from '$lib/assets/icons/calendar-solid.svg?component';
    import LinedCalendar from '$lib/assets/icons/calendar-thin.svg?component';
    import FilledDownload from '$lib/assets/icons/inbox-in-filled.svg?component';
    import LinedDownload from '$lib/assets/icons/inbox-in.svg?component';
    import FilledProfile from '$lib/assets/icons/circle-user-filled.svg?component';
    import LineProfile from '$lib/assets/icons/circle-user.svg?component';
    import { onMount, SvelteComponent, type ComponentType } from 'svelte';
    import type { SVGAttributes } from 'svelte/elements';
    // assets/icons/house-blank.svg
    const navOptions: { name: string, href: string, selected: ComponentType, unSelected: ComponentType }[] = [
        {
            name: 'Home',
            href: '/',
            selected: FilledHouse,
            unSelected: LinedHouse
        },
        {
            name: 'Releases',
            href: '/releases',
            selected: FilledCalendar,
            unSelected: LinedCalendar

        },
        {
            name: 'Downloads',
            href: '/downloads',
            selected: FilledDownload,
            unSelected: LinedDownload
        },
        {
            name: 'Profile',
            href: '/profile',
            selected: FilledProfile,
            unSelected: LineProfile
        }
    ]

    let path: string;
    onMount(() => {
        path = '/' + window.location.pathname.split('/')[1];
        console.log(navOptions[0].selected);
    })
</script>

<nav>

    {#each navOptions as option}
        <a href={option.href}>
            {#if path === option.href} 
                    <svelte:component this={option.selected} name={option.name} /> <!-- Error here -->
                    <span>{option.name}</span>
                {:else}
                    <svelte:component this={option.unSelected} fill="white" name={option.name}/> <!-- Error here -->
                    <span style="color: var(--icon-unselected);">{option.name}</span>
            {/if}
        </a>
    {/each}
</nav>

[poppa]

Hi @NubbDev

I did a quick mockup (https://github.com/poppa/sveltekit-svg/commit/da52531644175338636d0488b27ba5b4818ab946) of your code, but I can't reproduce the error.

My guess is your error is related to something else since I can't see any promises in your sample code and you have this error: Uncaught (in promise)

So unless you can provide me with a sample-repo with this error re-produced in isolation, I'm afraid I can't do very much about it atm.

[NubbDev]

Ok. I create a repo of the current project I'm on: https://github.com/NubbDev/anime-frontend

You don't have to run the desktop app, just run the dev script.

[NubbDev]

I created a whole new project, the same thing and I don't receive this runtime error. I really don't know what caused this error to happen.