Modal component warnings

[krisskod]

Current Behavior

I'm trying to use the Modal component but I have some warnings in my DevTools.

Steps To Reproduce

1. Create a modal:

modalStore.trigger({
  type: 'component',
  component: { ref: UploaderFileModal, props: { file } },
  modalClasses: '!p-0'
})

UploaderFileModal.svelte:

<script lang="ts">
  import CaretLeft from 'phosphor-svelte/lib/CaretLeft'
  import CaretRight from 'phosphor-svelte/lib/CaretRight'

  import Button from '../Button.svelte'
  import type { UploadedFile } from './types'

  export let file: UploadedFile

  function onKeyDown(e: KeyboardEvent): void {
    console.log(e)
  }
</script>

<div class="card variant-ringed-surface p-0" on:keydown={onKeyDown}>
  <img src={file.url} class="h-auto w-full" alt={file.alt ?? ''} />

  <footer class="card-footer flex justify-between p-5">
    <Button class="variant-filled-surface" aria-label="Previous file">
      <CaretLeft size={24} slot="icon" />
    </Button>

    <p class="self-center text-center">{file.name} ({Math.floor(file.size / 1024)} KB)</p>

    <Button class="variant-filled-surface" aria-label="Next file">
      <CaretRight size={24} slot="icon" />
    </Button>
  </footer>
</div>

2. See the error in DevTools :

<UploaderFileModal> received an unexpected slot "default". 
<UploaderFileModal> was created with unknown prop 'parent'

Anything else?

No response

[endigo9740]

Adding a quick note here to remind myself - the fix will be to add a conditional around the default slot in Modals.svelte. Currently that's always present, hence the warning.

[endigo9740]

Found a Svelte core contributor discussing the issue here:
sveltejs/kit#981 (comment)

It is just a dev-time warning, none of these show up in the production build.

Given this, there's nothing to fix or address. This can be safely ignored as the warning will not be present in production.