Svelte: Incorrect error message "... received an unexpected slot "default".

[code14214]

Describe the bug
When passing 2 named slots to a component, you get an error message in the console, although everything is correct.

To Reproduce
The problem can be seen right in the tutorial under 'Named slots' after clicking 'show me' and opening the console.
https://svelte.dev/tutorial/named-slots

Expected behavior
There should be no error massage in the console.

Severity
Inconvenient. It was leading me on a wrong path, when trying to find a real bug.

[Conduitry]

Presumably related to #4500/#4501.

[tanhauhau]

it would be helpful if you provide us a simple repro that we can take a look?

[code14214]

it would be helpful if you provide us a simple repro that we can take a look?

I am not sure, how I could make a simpler repro than the one from the tutorial I linked?
The bug occours right in the tutorial!
https://svelte.dev/tutorial/named-slots

[tanhauhau]

tangentially related, but this is fixed in https://github.com/sveltejs/svelte/pull/4556, in this test case: https://github.com/sveltejs/svelte/pull/4556/files#diff-4fdcde5b851c691eb791748d997f0969L6

[voscausa]

I have the same problem: received an unexpected slot "default".
I'am using svelte "^3.20.1"

This is the code with the problem:

<div class="nav-bar">
  <div>
    <slot name="nav-bar-start">start</slot>
  </div>
  <div>
    <slot name="nav-bar-end">end</slot>
  </div>
</div>

[jakobrosenberg]

This also incorrectly produces an error.

<svelte:component this={Component}>{#if hasChild}<Child />{/if}</svelte:component>

[jakobrosenberg]

Update: It looks like I only receive the ".. unexpected slot .." message in dev mode.
When I deploy the build using firebase hosting I do not receive the message.

@voscausa warnings are only shown in dev mode.

[venkateshwarans]

Is the issue fixed?

There is a warning in the console that says <Card> received an unexpected slot "default".

I have three components

1. App.svelte
2. Card.svelte
3. Button.svelte

In Button.svelte, I have an unnamed slot

<button>
  <slot></slot>
</button>

Card component has two named slots.

<div>
     <slot name="name"></slot>
</div>
<p>
    <slot name="content"></slot>
</p>

and both Button and Card are used in App component.

When I expand the warning, the Card component is pointing to Button component as seen in the image. I am not sure if the warning is because of the unamed slot in Button components.

If you want to check the source, feel free- https://github.com/venkateshwarans/starwars-svelte

[sreekotay]

I was able to get rid of this warning by adding :

<slot></slot>

to my component - but that doesn't seem right...

[jsprog]

This should be better

{#if false}<slot></slot>{/if}

[wobsoriano]

I'm also getting this warning. Here's my code:

{#if isLoading}
  <slot name="loading">
    <span>Your loading content here.</span>
  </slot>
{:else if isMonetized}
  <slot name="monetized">
    <span>Monetized content here.</span>
  </slot>
{:else}
  <slot name="not-monetized">
    <span>Your ads here.</span>
  </slot>
{/if}

[sreekotay]

@sorxrob ... see the comment from myself and @jsprog above.
It's because you don't have a default (unamed) slot (which seems like a bug in the compiler.

The following will do nothing and get rid of the error until the issues is addressed:
{#if false}<slot></slot>{/if}

[tillbaks]

Problem seems to be whitespace. I'm getting the error when there is whitespace between the named slots which I guess becomes the default slot that is unexpected.

No warning:

      <Card><div slot="front">front</div><div slot="back">
          back
        </div></Card>

Unexpected default slot:

      <Card>
        <div slot="front">front</div>
        <div slot="back">
          back
        </div>
      </Card>

[NotThatBowser]

Can confirm the above behaviour.

The warning can only be removed by having no whitespace between named slots, which obviously isn't ideal.

[sonyseng]

Came here to say I see this issue as well with/without whitespace and the only solution is to have a sibling default <slot /> element. But it sounds like there is a slot rfc/proposal that's being discussed and it should alleviate this issue: #4556

Just a minor inconvenience.

[milocosmopolitan]

Umm I've got this warning message too, but I decided to not bother addressing. This message is only shown during dev environment. So my question is should I even care to add a single line of code to remove this warning message? After all this is not an Error message. Since when you build for production this message is never shown on runtime. Also what could be impacted by not adding the default slot, when your code is strictly placings named slots to place where you wish? Just feels like life is often too short to address all the warning signs

[roblevintennis]

Yup, happening to me too. I'd remove the whitespace but then I have to remove my IDE's format on save special for just this file. Choosing to ignore for now, but it'd be nice for this to get address 👍