Incorrect error message "... received an unexpected slot "default". #4546

code14214 · 2020-03-12T09:03:22Z

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 · 2020-03-12T09:18:09Z

Presumably related to #4500/#4501.

tanhauhau · 2020-03-12T09:26:26Z

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

code14214 · 2020-03-12T09:41:42Z

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 · 2020-03-15T10:12:37Z

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

voscausa · 2020-03-16T19:32:36Z

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 · 2020-03-17T08:52:59Z

This also incorrectly produces an error.

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

jakobrosenberg · 2020-03-17T08:54:49Z

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 · 2020-05-03T10:02:25Z

Is the issue fixed?

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

I have three components

App.svelte
Card.svelte
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 · 2020-05-04T21:31:17Z

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

<slot></slot>

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

jsprog · 2020-05-10T15:56:12Z

This should be better

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

wobsoriano · 2020-05-12T00:17:08Z

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 · 2020-05-12T13:49:22Z

@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 · 2020-05-19T11:23:18Z

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 · 2020-07-10T16:39:28Z

Can confirm the above behaviour.

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

sonyseng · 2020-08-19T20:02:55Z

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 · 2020-09-11T13:41:46Z

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 · 2020-10-14T16:24:08Z

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 👍

chimp1nski · 2020-12-14T14:56:52Z

FYI adding an unnamed slot with <slot/> can have some unexpected sideeffects!

I had an issue where adding an unnamed slot to a _layout.svelte file in sapper (to get rid of the warning) resulted in content from other pages appearing in this otherwise "unused" slot!

This really confused me when the content first appeared - getting rid of <slot/> did the trick. Now I have to live with the warning I guess :/

sallaben · 2020-12-23T03:09:39Z

@chimp1nski, you can use the {#if false}<slot />{/if} hack mentioned elsewhere in this thread until this issue is fixed. I agree though, simply using <slot /> can have unintended effects.

jdgaravito · 2021-02-12T16:37:23Z

i ahve the same problem, the {#if false}{/if} hack got rid of it

aislanmaia · 2021-02-15T14:35:54Z

I have a Modal component with some slots and receiving the same warning.
Confirming that I can remove it with {#if false}{/if}
But this seems a weird thing to add in codebase.

tanhauhau · 2021-03-02T07:31:08Z

This should be fixed now in 3.35.0.

PierBover · 2021-04-04T23:28:09Z

I'm still getting the error when using this to generate recursive nested components:

<script>
	export let components;
</script>
<svelte:component this={components[0]}>
	{#if components[1]}
		<svelte:self slot="route-child" components={components.slice(1)}/>
	{/if}
</svelte:component>

The components prop is simply an array with component references.

Here's a REPL that shows the error: https://svelte.dev/repl/f246cb87fc314e159fc9f20e81737ae5

In the REPL the recursion breaks for some reason but I can provide a repository with a working repro if that will help.

Edit:

So I removed the warning by just using the default slot, but still, a default slot shouldn't be needed when only passing content that should be mounted on a named slot, no?

<script>
	export let components;
</script>

{#if components.length > 1}
	<svelte:component this={components[0]}>
		<svelte:self components={components.slice(1)}/>
	</svelte:component>
{:else}
	<svelte:component this={components[0]}/>
{/if}

buzinas · 2021-04-05T01:47:44Z

I'm facing the same warning when using a child layout with SvelteKit. Minimum reproducible code:

<!-- routes/$layout.svelte -->
<h1>Svelte</h1>
<nav>
  <a href="/">Home</a>
  <a href="/page1">Page 1</a>
  <a href="/page2">Page 2</a>
</nav>
<slot />

<!-- routes/index.svelte -->
<p>Home</p>

<!-- routes/page1.svelte -->
<p>Page 1</p>

<!-- routes/page2/$layout -->
<p>Page 2</p>
<nav>
  <a href="/page2">Main</a>
  <a href="/page2/sub1">Subpage 1</a>
</nav>
<slot />

<!-- routes/page2/index.svelte -->
<p>Main</p>

<!-- routes/page2/sub1.svelte -->
<p>Subpage 1</p>

Before having a child layout on page2 folder, everything works fine, but as soon as you add it, only page2 subpages will work fine, all the other pages will trigger this warning (although there is no bug/error whatsoever, only the warning).

Contains fix for sveltejs/svelte#4546

bastinald · 2021-04-20T03:39:51Z

Same warning here just using <slot /> in my $layout:

<div class="wrapper">
	<header>
		<a href="/"><img src="logo.png" alt={env.VITE_WEBSITE_NAME} /></a>
		<a href="tel:{env.VITE_PHONE_NUMBER}">{env.VITE_PHONE_NUMBER}</a>
	</header>

	<main>
		<slot />
	</main>

	<footer>
		<p>
			&copy;{new Date().getFullYear()}
			<a href="/">{env.VITE_WEBSITE_NAME}</a>
		</p>
		<a href="/privacy">Privacy Policy</a>
	</footer>
</div>

YamiOdymel · 2021-05-06T03:18:47Z

Still got the same warning with Svelte ^3.38.1

Message

index.mjs:1701 <ts-divider> received an unexpected slot "default".
validate_slots @ index.mjs:1701
instance       @ Divider.svelte:132
init           @ index.mjs:1517
Divider        @ Divider.svelte:18
(anonymous)    @ Divider.svelte:18
(anonymous)    @ Divider.svelte:18

Template

<div class="ts-divider">
    <!-- Text -->
    {#if $$slots.default}
    <div class="ts-divider__text">
        <div class="ts-divider__text__start">
            <div class="ts-divider__text__line"></div>
        </div>
        <div class="ts-divider__text__center">
            <slot></slot>
        </div>
        <div class="ts-divider__text__end">
            <div class="ts-divider__text__line"></div>
        </div>
    </div>
    {/if}
    <!-- / Text -->

    <!-- Line Only -->
    {#if !$$slots.default}
    <div class="ts-divider__line"></div>
    {/if}
    <!-- / Line Only -->
</div>

chaosprint · 2021-05-06T10:44:31Z

Still got the same warning with Svelte ^3.38.1

Message

index.mjs:1701 <ts-divider> received an unexpected slot "default".
validate_slots @ index.mjs:1701
instance       @ Divider.svelte:132
init           @ index.mjs:1517
Divider        @ Divider.svelte:18
(anonymous)    @ Divider.svelte:18
(anonymous)    @ Divider.svelte:18

Template

<div class="ts-divider">
    <!-- Text -->
    {#if $$slots.default}
    <div class="ts-divider__text">
        <div class="ts-divider__text__start">
            <div class="ts-divider__text__line"></div>
        </div>
        <div class="ts-divider__text__center">
            <slot></slot>
        </div>
        <div class="ts-divider__text__end">
            <div class="ts-divider__text__line"></div>
        </div>
    </div>
    {/if}
    <!-- / Text -->

    <!-- Line Only -->
    {#if !$$slots.default}
    <div class="ts-divider__line"></div>
    {/if}
    <!-- / Line Only -->
</div>

Yes, same for me, at the init phase.

j2l · 2021-05-11T12:31:15Z

Same for me, I don't even added a slot or have a sub-pages, just index.svelte:

<Routes> received an unexpected slot "default".
validate_slots @ index.mjs?v=8ddcf66d:1667
instance @ index.svelte? [sm]:44
init @ index.mjs?v=8ddcf66d:1485
Routes @ index.svelte? [sm]:44
createProxiedComponent @ svelte-hooks.js:245
ProxyComponent @ proxy.js:240
Proxy<Index> @ proxy.js:340
create_if_block_2 @ root.svelte? [sm]:38
create_default_slot @ root.svelte? [sm]:39
create_slot @ index.mjs?v=8ddcf66d:61
create_fragment @ layout.svelte:19
init @ index.mjs?v=8ddcf66d:1500
Layout @ layout.svelte:86
createProxiedComponent @ svelte-hooks.js:245
ProxyComponent @ proxy.js:240
Proxy<Layout> @ proxy.js:340
create_fragment @ root.svelte? [sm]:36
init @ index.mjs?v=8ddcf66d:1500
Root @ root.svelte? [sm]:16
createProxiedComponent @ svelte-hooks.js:245
ProxyComponent @ proxy.js:240
Proxy<Root> @ proxy.js:340
_init @ start.js:620
start @ start.js:504
async function (async)
start @ start.js:457
start @ start.js:1068
(anonymous) @ (index):15

Only the layout.svelte component has a <slot></slot>

YamiOdymel · 2021-05-14T00:51:57Z

Since the issue didn't get re-opened, I've created a new issue for this.

[AGAIN] Incorrect error message "... received an unexpected slot "default".

benbender · 2021-07-22T05:38:22Z

@tanhauhau Sadly, the bug isn't fixed. I think this needs to be reopened.

Simple reproduction: npm init svelte@next slot-test && cd slot-test && npm i && npm run dev + open the browser dev-console. You don't need to write a single char of code to trigger it :)

justingolden21 · 2021-08-13T21:20:18Z

Encountering this bug in Aug 2021

Rhplx · 2021-09-10T18:49:54Z

Same bug, 10 sep 2021

basaran · 2021-09-17T07:01:48Z

same bug, september 17th, 2021

thebinij · 2021-12-16T17:19:27Z

Encountering this bug in Dec 2021

justingolden21 · 2021-12-17T07:36:46Z

@tanhauhau any word on this?

ixxie · 2021-12-21T21:39:54Z

Also encountering this bug, with a fresh project which I setup this week (late December, 2021)

Conduitry added the bug label Mar 12, 2020

Conduitry added the slot label Mar 12, 2020

acim mentioned this issue Apr 17, 2020

#4 fix undefined $$props.$$slots AlexxNB/svelte-chota#5

Merged

dimfeld mentioned this issue Oct 23, 2020

Surprise empty default slot #5567

Closed

j3rem1e added a commit to j3rem1e/svelte that referenced this issue Oct 31, 2020

Skip default slot if it contains only spaces (sveltejs#4546)

1cbbcfe

tanhauhau closed this as completed Mar 2, 2021

kylebuildsstuff mentioned this issue Mar 10, 2021

<Popover> received an unexpected slot "default". 6eDesign/svelte-calendar#108

Closed

sthaha added a commit to sthaha/labs that referenced this issue Apr 5, 2021

Upgrade svelte to 3.35.0 to fix default slot issue

59b8d11

Contains fix for sveltejs/svelte#4546

ebeloded mentioned this issue May 12, 2021

<Routes> received an unexpected slot "default". sveltejs/kit#981

Closed

YamiOdymel mentioned this issue May 14, 2021

[AGAIN] Incorrect error message "... received an unexpected slot "default". #6325

Closed

burlesona mentioned this issue Sep 12, 2021

Persistent Layouts don't render with Inertia/Svelte inertiajs/inertia#898

Closed

Incorrect error message "... received an unexpected slot "default". #4546

Incorrect error message "... received an unexpected slot "default". #4546

Comments

code14214 commented Mar 12, 2020 • edited Loading

Conduitry commented Mar 12, 2020

tanhauhau commented Mar 12, 2020

code14214 commented Mar 12, 2020

tanhauhau commented Mar 15, 2020 • edited Loading

voscausa commented Mar 16, 2020 • edited Loading

jakobrosenberg commented Mar 17, 2020

jakobrosenberg commented Mar 17, 2020

venkateshwarans commented May 3, 2020 • edited Loading

sreekotay commented May 4, 2020 • edited Loading

jsprog commented May 10, 2020

wobsoriano commented May 12, 2020

sreekotay commented May 12, 2020

tillbaks commented May 19, 2020

NotThatBowser commented Jul 10, 2020

sonyseng commented Aug 19, 2020

milocosmopolitan commented Sep 11, 2020

roblevintennis commented Oct 14, 2020

chimp1nski commented Dec 14, 2020

sallaben commented Dec 23, 2020 • edited Loading

jdgaravito commented Feb 12, 2021

aislanmaia commented Feb 15, 2021 • edited Loading

tanhauhau commented Mar 2, 2021

PierBover commented Apr 4, 2021 • edited Loading

buzinas commented Apr 5, 2021

bastinald commented Apr 20, 2021 • edited Loading

YamiOdymel commented May 6, 2021 • edited Loading

chaosprint commented May 6, 2021

j2l commented May 11, 2021

YamiOdymel commented May 14, 2021

benbender commented Jul 22, 2021

justingolden21 commented Aug 13, 2021

Rhplx commented Sep 10, 2021

basaran commented Sep 17, 2021

thebinij commented Dec 16, 2021

justingolden21 commented Dec 17, 2021

ixxie commented Dec 21, 2021

code14214 commented Mar 12, 2020 •

edited

Loading

tanhauhau commented Mar 15, 2020 •

edited

Loading

voscausa commented Mar 16, 2020 •

edited

Loading

venkateshwarans commented May 3, 2020 •

edited

Loading

sreekotay commented May 4, 2020 •

edited

Loading

sallaben commented Dec 23, 2020 •

edited

Loading

aislanmaia commented Feb 15, 2021 •

edited

Loading

PierBover commented Apr 4, 2021 •

edited

Loading

bastinald commented Apr 20, 2021 •

edited

Loading

YamiOdymel commented May 6, 2021 •

edited

Loading