Code breaks with error: $$slots is an illegal variable name

Question

我想为我的组件创建一个可选插槽，按照 tutorial 的说明在 VS Code 中下到我的本地计算机，但它不起作用，视图也没有显示。

无法从网上找到任何资源和修复程序，我该如何解决这个问题？

Stacktrace

[0] rollup v2.26.4
[0] bundles src/main.js → public\build\bundle.js...
[0] [!] (plugin svelte) ValidationError: $$slots is an illegal variable name
[0] src\views\Settings\SettingsItem.svelte
[0] 16:   </div>
[0] 17:
[0] 18:   {#if $$slots.trailing}
[0]            ^
[0] 19:     <slot name="trailing" />
[0] 20:   {:else}
[0] ValidationError: $$slots is an illegal variable name
[0]     at error (C:\Users\Fukka\Documents\Electron\maze-player-svelte\node_modules\svelte\src\compiler\utils\error.ts:25:16)
[0]     at Component.error (C:\Users\Fukka\Documents\Electron\maze-player-svelte\node_modules\svelte\src\compiler\compile\Component.ts:406:3)
[0]     at Component.warn_if_undefined (C:\Users\Fukka\Documents\Electron\maze-player-svelte\node_modules\svelte\src\compiler\compile\Component.ts:1300:10)
[0]     at Object.enter (C:\Users\Fukka\Documents\Electron\maze-player-svelte\node_modules\svelte\src\compiler\compile\nodes\shared\Expression.ts:114:17)
[0]     at visit (C:\Users\Fukka\Documents\Electron\maze-player-svelte\node_modules\svelte\node_modules\estree-walker\src\estree-walker.js:51:10)
[0]     at walk (C:\Users\Fukka\Documents\Electron\maze-player-svelte\node_modules\svelte\node_modules\estree-walker\src\estree-walker.js:2:9)
[0]     at new Expression (C:\Users\Fukka\Documents\Electron\maze-player-svelte\node_modules\svelte\src\compiler\compile\nodes\shared\Expression.ts:63:3)
[0]     at new IfBlock (C:\Users\Fukka\Documents\Electron\maze-player-svelte\node_modules\svelte\src\compiler\compile\nodes\IfBlock.ts:14:21)
[0]     at C:\Users\Fukka\Documents\Electron\maze-player-svelte\node_modules\svelte\src\compiler\compile\nodes\shared\map_children.ts:53:16
[0]     at Array.map (<anonymous>)

Settings.svelte

<SettingsItem
  href="/settings"
  title="Music Path"
  subtitle="Choose where we look for music"
/>

SettingsItem.svelte

<script>
  import { link } from "svelte-spa-router";

  export let href;
  export let title = "No title given";
  export let subtitle;
</script>

<a use:link {href} class="settings-item">
  <div class="detail">
    <p class="title">{title}</p>

    {#if subtitle}
      <p class="subtitle">{subtitle}</p>
    {/if}
  </div>

  <!-- HERE -->
  {#if $$slots.trailing}
    <slot name="trailing" />
  {:else}
    <i class="bx bx-chevron-right icon" />
  {/if}
</a>

Answer 1

你好像落后了一个版本。 $$slots was introduced in version 3.25.0.

将 svelte 升级到 >= 3.25.0 应该可以解决问题。

Answer 2

对于那些由于某种原因无法将 svelte 更新到@juliomalves 的回答中的指定版本的人，将 <i> 标签放在插槽内效果很好。

SettingsItem.svelte

<div class="settings-item" on:click>
  <div class="detail">
    <p class="title">{title}</p>

    {#if subtitle}
      <p class="subtitle">{subtitle}</p>
    {/if}
  </div>

  <slot name="trailing">
    <i class="bx bx-chevron-right icon" />
  </slot>
</div>

Settings.svelte

<SettingsItem
  title="Music Path"
  subtitle="Choose where we look for music"
  on:click={toggleModal}
>
  <p slot="trailing">some neat text in the slot</p>
</SettingsItem>

<SettingsItem
  title="Metadata"
  subtitle="Automatically retrieve and update missing album art and metadata (requires internet)"
/>