Duplicate img when creating custom skeleton component modals

Question

I am using [email protected], svelte-kit and tailwind.
I want to create a custom component modal (see https://www.skeleton.dev/utilities/modals at "component modals") to display an image. The modal gets called via a function, that also passes the specific img url.
The Problem: When opening the modal, the image gets displayed twice. 1. The image as if I had no custom componed provided and 2. The custom img rendered by the img html tag with my custom styles. I'd only like to display the second one.

The codeblock calling the modal function:

<div
            on:click="{() => componentModal({ image: image })}"
            class="image h-56 w-56 shrink-0 rounded bg-cover duration-300"
            style="background-image: url({image})"
          ></div>

The modal function itself:

export const componentModal = (settings: Partial<ModalSettings>): Promise<void> =>
  new Promise((resolve, reject) => {
    modalStore.trigger({
      type: 'component',
      component: { ref: FileModal },
      image: '/favicon.png',
      response: (r) => (r ? resolve() : reject()),
      ...settings,
    });
  });

The FileModal.svelte:

<script lang="ts">
  import { modalStore } from '@skeletonlabs/skeleton';

  const cImage = 'max-w-[90%] max-h-[90%] rounded-container-token overflow-hidden shadow-xl';
</script>

{#if $modalStore[0]}
  <!-- Image -->
  <img src="{$modalStore[0].image}" class="{cImage}" alt="Example" />
{/if}

Also, I get two warnings in the browser console:

1. <FileModal> received an unexpected slot "default"
2. <FileModal> was created with unknown prop 'parent' The latter pbl only has to do with the fact that I don't have an export let parent... set in FileModal.svelte

Answer 1

As it turns out, one should use the right version of skeleton (i.e. 1.10.x).

It seems the type: component was just not supported at v0.89.6.