时间戳

首页 > 解决方案 > 代码因错误而中断：$$slots 是非法变量名

svelte - 代码因错误而中断：$$slots 是非法变量名

问题描述

我想为我的组件创建一个可选插槽，按照教程中的说明一直到我在 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$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>

标签： svelte

解决方案

你似乎落后了一个版本。$$slots版本中引入3.25.0。

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

推荐阅读