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

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

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

Если эффект обновляет некоторое состояние, от которого он также зависит, он будет перезапускаться, возможно, в цикле:

let count = $state(0);

$effect(() => {
  // это одновременно читает и пишет `count`,
  // поэтому будет выполняться в бесконечном цикле
  count += 1;
});

(Svelte вмешивается до того, как это может привести к сбою вкладки браузера.)

То же самое относится к мутациям массивов, поскольку они одновременно читают и записывают в массив:

let array = $state(['hello']);

$effect(() => {
  array.push('goodbye');
});

Обратите внимание, что эффект может перезапускаться, если он в итоге «стабилизируется»:

$effect(() => {
  // это нормально, потому что сортировка уже отсортированного массива
  // не приведет к мутации
  array.sort();
});

Часто при возникновении этой проблемы значение, о котором идет речь, не должно быть состоянием (например, если вы добавляете элементы в массив logs в эффекте, сделайте logs обычным массивом, а не $state([])). В редких случаях, когда вам действительно нужно записывать в состояние в эффекте — чего следует избегать — вы можете читать состояние с помощью untrack, чтобы избежать добавления его в качестве зависимости.

flush_sync_in_effect

Cannot use `flushSync` inside an effect

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

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

fork_discarded

Cannot commit a fork that was already discarded

fork_timing

Cannot create a fork inside an effect or when state changes are pending

get_abort_signal_outside_reaction

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

hydratable_missing_but_required

Expected to find a hydratable with key `%key%` during hydration, but did not.

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

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

  if (BROWSER) {
    // плохо! интерфейс останется полностью неинтерактивным, пока эта асинхронная операция не завершится
    await hydratable('foo', get_slow_random_number);
  }
</script>

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.

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

async_local_storage_unavailable

The node API `AsyncLocalStorage` is not available, but is required to use async server rendering.

На некоторых платформах для включения этого API требуется установить специальные флаги конфигурации. Обратитесь к документации вашей платформы.

await_invalid

Encountered asynchronous work while rendering synchronously.

Вы (или используемый вами фреймворк) вызвали render(...) с компонентом, содержащим выражение await. Либо выполните await для результата render, либо оберните await (или компонент, содержащий его) в <svelte:boundary> с фрагментом pending.

html_deprecated

The `html` property of server render results has been deprecated. Use `body` instead.

hydratable_clobbering

Attempted to set `hydratable` with key `%key%` twice with different values.

%stack%

Эта ошибка возникает, когда hydratable используется несколько раз с одним и тем же ключом. Чтобы избежать её, вы можете:

• Убедиться, что все вызовы с одинаковым ключом возвращают одно и то же значение
• Изменить ключи так, чтобы каждый экземпляр имел уникальный ключ

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

  // какой из них должен «победить» и попасть в сериализованный ответ?
  const one = hydratable('not-unique', () => 1);
  const two = hydratable('not-unique', () => 2);
</script>

hydratable_serialization_failed

Failed to serialize `hydratable` data for key `%key%`.

`hydratable` can serialize anything [`uneval` from `devalue`](https://npmjs.com/package/uneval) can, plus Promises.

Cause:
%stack%

invalid_csp

`csp.nonce` was set while `csp.hash` was `true`. These options cannot be used simultaneously.

lifecycle_function_unavailable

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

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

server_context_required

Could not resolve `render` context.

Некоторые функции, такие как hydratable, нельзя вызывать вне вызова render(...), например на верхнем уровне модуля.

Общие ошибки

experimental_async_required

Cannot use `%name%(...)` unless the `experimental.async` compiler option is `true`

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>

missing_context

Context was not set in a parent component

Утилита createContext() возвращает пару функций [get, set]. get вызовет ошибку, если set не был использован для установки контекста в родительском компоненте.

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