Ошибки рантайма

Ошибки клиента

async_derived_orphan

Cannot create a `$derived(...)` with an `await` expression outside of an effect tree

В Svelte существует два типа реакций — $derived и $effect. Производные (derived) можно создавать где угодно, так как они выполняются лениво и могут быть собраны сборщиком мусора, если на них нет ссылок. Эффекты же, напротив, продолжают выполняться активно при каждом изменении их зависимостей, пока не будут уничтожены.

По этой причине эффекты можно создавать только внутри других эффектов (или корней эффектов, таких как создаваемый при первоначальном монтировании компонента), чтобы Svelte знал, когда их нужно уничтожить.

Особый случай возникает, когда производная содержит выражение await: поскольку ожидание до момента чтения {await getPromise()} для вызова getPromise было бы слишком поздним, мы используем эффект для его активного вызова, уведомляя Svelte, когда значение становится доступным. Но поскольку мы используем эффект, асинхронные производные можно создавать только внутри другого эффекта.

bind_invalid_checkbox_value

Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead

bind_invalid_export

Component %component% has an export named `%key%` that a consumer component is trying to access using `bind:%key%`, which is disallowed. Instead, use `bind:this` (e.g. `<%name% bind:this={component} />`) and then access the property on the bound component instance (e.g. `component.%key%`)

bind_not_bindable

A component is attempting to bind to a non-bindable property `%key%` belonging to %component% (i.e. `<%name% bind:%key%={...}>`). To mark a property as bindable: `let { %key% = $bindable() } = $props()`

component_api_changed

Calling `%method%` on a component instance (of %component%) is no longer valid in Svelte 5

Дополнительную информацию можно найти в руководстве по миграции.

component_api_invalid_new

Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working.

Дополнительную информацию можно найти в руководстве по миграции.

derived_references_self

A derived value cannot reference itself recursively

each_key_duplicate

Keyed each block has duplicate key at indexes %a% and %b%

Keyed each block has duplicate key `%value%` at indexes %a% and %b%

effect_in_teardown

`%rune%` cannot be used inside an effect cleanup function

effect_in_unowned_derived

Effect cannot be created inside a `$derived` value that was not itself created inside an effect

effect_orphan

`%rune%` can only be used inside an effect (e.g. during component initialisation)

effect_pending_outside_reaction

`$effect.pending()` can only be called inside an effect or derived

effect_update_depth_exceeded

Maximum update depth exceeded. This can happen when a reactive block or effect repeatedly sets a new value. Svelte limits the number of nested updates to prevent infinite loops

flush_sync_in_effect

Cannot use `flushSync` inside an effect

Функция flushSync() может использоваться для синхронного выполнения всех ожидающих эффектов. Её нельзя вызывать во время текущего выполнения эффектов — то есть, её можно вызывать после изменения состояния, но не внутри эффекта.

Это ограничение применяется только при использовании опции experimental.async, которая будет включена по умолчанию в Svelte 6.

get_abort_signal_outside_reaction

`getAbortSignal()` can only be called inside an effect or derived

hydration_failed

Failed to hydrate the application

invalid_snippet

Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`

lifecycle_legacy_only

`%name%(...)` cannot be used in runes mode

props_invalid_value

Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value

props_rest_readonly

Rest element properties of `$props()` such as `%property%` are readonly

rune_outside_svelte

The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files

set_context_after_init

`setContext` must be called when a component first initializes, not in a subsequent effect or after an `await` expression

Это ограничение применяется только при использовании опции experimental.async, которая будет включена по умолчанию в Svelte 6.

state_descriptors_fixed

Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.

state_prototype_fixed

Cannot set prototype of `$state` object

state_unsafe_mutation

Updating state inside `$derived(...)`, `$inspect(...)` or a template expression is forbidden. If the value should not be reactive, declare it without `$state`

Эта ошибка возникает при обновлении состояния во время вычисления $derived. Вы можете столкнуться с ней при попытке «вывести» (derive) два состояния за один раз:

<script>
  let count = $state(0);

  let even = $state(true);

  let odd = $derived.by(() => {
    even = count % 2 === 0;
    return !even;
  });
</script>

<button onclick={() => count++}>{count}</button>

<p>{count} чётное: {even}</p>
<p>{count} нечётное: {odd}</p>

Это запрещено, так как приводит к нестабильности: если <p>{count} чётное: {even}</p> обновится до пересчёта odd, значение even окажется устаревшим. В большинстве случаев решением является использование производных значений для всех зависимостей:

let even = $derived(count % 2 === 0);
let odd = $derived(!even);

Если побочные эффекты неизбежны, используйте руну $effect.

Ошибки сервера

lifecycle_function_unavailable

`%name%(...)` is not available on the server

Некоторые методы, такие как mount, не могут быть вызваны в серверном контексте. Избегайте их преждевременного вызова, то есть не вызывайте их во время рендеринга.

Общие ошибки

invalid_default_snippet

Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead

Эта ошибка возникает в подобных случаях:

Parent.svelte

<List {items} let:entry>
  <span>{entry}</span>
</List>

JS

List.svelte

<script>
  let { items, children } = $props();
</script>

<ul>
  {#each items as item}
    <li>{@render children(item)}</li>
  {/each}
</ul>

TS

List.svelte

<script lang="ts">
  let { items, children } = $props();
</script>

<ul>
  {#each items as item}
    <li>{@render children(item)}</li>
  {/each}
</ul>

В данном случае List.svelte использует {@render children(item)}, что означает ожидание сниппетов от родительского компонента. Однако Parent.svelte использует устаревшую директиву let:. Эти API несовместимы, отсюда и ошибка.

invalid_snippet_arguments

A snippet function was passed invalid arguments. Snippets should only be instantiated via `{@render ...}`

lifecycle_outside_component

`%name%(...)` can only be used during component initialisation

Некоторые методы жизненного цикла могут использоваться только во время инициализации компонента. Чтобы исправить это, убедитесь, что вы вызываете метод на верхнем уровне тега script компонента:

<script>
  import { onMount } from 'svelte';

  function handleClick() {
      // Неправильно
      onMount(() => {})
  }

  // Правильно
  onMount(() => {})
</script>

<button onclick={handleClick}>нажми меня</button>

snippet_without_render_tag

Attempted to render a snippet without a `{@render}` block. This would cause the snippet code to be stringified instead of its content being rendered to the DOM. To fix this, change `{snippet}` to `{@render snippet()}`.

Вот как может выглядеть компонент, вызывающий эту ошибку (при этом children не отображается):

<script>
  let { children } = $props();
</script>

{children}

…или так (родительский компонент передаёт сниппет, хотя ожидается не сниппет):

Parent.svelte

<ChildComponent>
  {#snippet label()}
    <span>Привет!</span>
  {/snippet}
</ChildComponent>

Child.svelte

<script>
  let { label } = $props();
</script>

<!-- Этот компонент не ожидает сниппет, но родительский компонент предоставил его -->
<p>{label}</p>

store_invalid_shape

`%name%` is not a store with a `subscribe` method

svelte_element_invalid_this_value

The `this` prop on `<svelte:element>` must be a string, if defined