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 #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}