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

Question

I want to make an optional slot for my component, followed the instruction from the tutorial down to my local machine in VS Code, but it's not working and the view are not showing.

Can't find any resources & fixes from the net, how can I fix this?

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$1 (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

You seem to be one version behind. $$slots was introduced in version 3.25.0.

Upgrading svelte to >= 3.25.0 should fix the issue.