option a

` is removed) * `

cell

` will result in `

cell

` (a `` is auto-inserted) This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail. ### non\_reactive\_update ``` `%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates ``` This warning is thrown when the compiler detects the following: * a variable was declared without `$state` or `$state.raw` * the variable is reassigned * the variable is read in a reactive context In this case, changing the value will not correctly trigger updates. Example: ```svelte

This value updates: {reactive}

This value does not update: {stale}

{ stale = 'updated'; reactive = 'updated'; }}>update ``` To fix this, wrap your variable declaration with `$state`. ### options\_deprecated\_accessors ``` The `accessors` option has been deprecated. It will have no effect in runes mode ``` ### options\_deprecated\_immutable ``` The `immutable` option has been deprecated. It will have no effect in runes mode ``` ### options\_missing\_custom\_element ``` The `customElement` option is used when generating a custom element. Did you forget the `customElement: true` compile option? ``` ### options\_removed\_enable\_sourcemap ``` The `enableSourcemap` option has been removed. Source maps are always generated now, and tooling can choose to ignore them ``` ### options\_removed\_hydratable ``` The `hydratable` option has been removed. Svelte components are always hydratable now ``` ### options\_removed\_loop\_guard\_timeout ``` The `loopGuardTimeout` option has been removed ``` ### options\_renamed\_ssr\_dom ``` `generate: "dom"` and `generate: "ssr"` options have been renamed to "client" and "server" respectively ``` ### perf\_avoid\_inline\_class ``` Avoid 'new class' — instead, declare the class at the top level scope ``` ### perf\_avoid\_nested\_class ``` Avoid declaring classes below the top level scope ``` ### reactive\_declaration\_invalid\_placement ``` Reactive declarations only exist at the top level of the instance script ``` ### reactive\_declaration\_module\_script\_dependency ``` Reassignments of module-level declarations will not cause reactive statements to update ``` ### script\_context\_deprecated ``` `context="module"` is deprecated, use the `module` attribute instead ``` ```svelte ``` ### script\_unknown\_attribute ``` Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it ``` ### slot\_element\_deprecated ``` Using `` to render parent content is deprecated. Use `{@render ...}` tags instead ``` See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info. ### state\_referenced\_locally ``` This reference only captures the initial value of `%name%`. Did you mean to reference it inside a %type% instead? ``` This warning is thrown when the compiler detects the following: * A reactive variable is declared * ...and later reassigned... * ...and referenced in the same scope This 'breaks the link' to the original state declaration. For example, if you pass the state to a function, the function loses access to the state once it is reassigned: ```svelte count++}> increment ``` ```svelte

The count is {count}

``` To fix this, reference the variable such that it is lazily evaluated. For the above example, this can be achieved by wrapping `count` in a function: ```svelte count++}> increment ``` ```svelte

The count is {+++count()+++}

``` For more info, see [Passing state into functions]($state#Passing-state-into-functions). ### store\_rune\_conflict ``` It looks like you're using the `$%name%` rune, but there is a local binding called `%name%`. Referencing a local variable with a `$` prefix will create a store subscription. Please rename `%name%` to avoid the ambiguity ``` ### svelte\_component\_deprecated ``` `` is deprecated in runes mode — components are dynamic by default ``` In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `` to re-render when `X` changed, you would either have to use `` or put the component inside a `{#key X}...{/key}` block. In Svelte 5 this is no longer true — if `X` changes, `` re-renders. In some cases `` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5. For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used: ```svelte {#each items as item} ------ +++{@const Component = item.condition ? Y : Z}+++ ++++++ {/each} ``` A derived value may be used in other contexts: ```svelte ------ ++++++ ``` ### svelte\_element\_invalid\_this ``` `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte ``` ### svelte\_self\_deprecated ``` `` is deprecated — use self-imports (e.g. `import %name% from './%basename%'`) instead ``` See [the note in the docs](legacy-svelte-self) for more info. ### unknown\_code ``` `%code%` is not a recognised code ``` ``` `%code%` is not a recognised code (did you mean `%suggestion%`?) ``` # Runtime errors ## Client errors ### async\_derived\_orphan ``` Cannot create a `$derived(...)` with an `await` expression outside of an effect tree ``` In Svelte there are two types of reaction — [`$derived`](/docs/svelte/$derived) and [`$effect`](/docs/svelte/$effect). Deriveds can be created anywhere, because they run *lazily* and can be [garbage collected](https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection) if nothing references them. Effects, by contrast, keep running eagerly whenever their dependencies change, until they are destroyed. Because of this, effects can only be created inside other effects (or [effect roots](/docs/svelte/$effect#$effect.root), such as the one that is created when you first mount a component) so that Svelte knows when to destroy them. Some sleight of hand occurs when a derived contains an `await` expression: Since waiting until we read `{await getPromise()}` to call `getPromise` would be too late, we use an effect to instead call it proactively, notifying Svelte when the value is available. But since we're using an effect, we can only create asynchronous deriveds inside another effect. ### 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 ``` See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information. ### 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. ``` See the [migration guide](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information. ### 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 typically indicates that an effect reads and writes the same piece of state ``` If an effect updates some state that it also depends on, it will re-run, potentially in a loop: ```js let count = $state(0); $effect(() => { // this both reads and writes `count`, // so will run in an infinite loop count += 1; }); ``` (Svelte intervenes before this can crash your browser tab.) The same applies to array mutations, since these both read and write to the array: ```js let array = $state(['hello']); $effect(() => { array.push('goodbye'); }); ``` Note that it's fine for an effect to re-run itself as long as it 'settles': ```js let array = ['a', 'b', 'c']; // ---cut--- $effect(() => { // this is okay, because sorting an already-sorted array // won't result in a mutation array.sort(); }); ``` Often when encountering this issue, the value in question shouldn't be state (for example, if you are pushing to a `logs` array in an effect, make `logs` a normal array rather than `$state([])`). In the rare cases where you really *do* need to write to state in an effect — [which you should avoid]($effect#When-not-to-use-$effect) — you can read the state with [untrack](svelte#untrack) to avoid adding it as a dependency. ### flush\_sync\_in\_effect ``` Cannot use `flushSync` inside an effect ``` The `flushSync()` function can be used to flush any pending effects synchronously. It cannot be used if effects are currently being flushed — in other words, you can call it after a state change but *not* inside an effect. This restriction only applies when using the `experimental.async` option, which will be active by default in 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 ``` This restriction only applies when using the `experimental.async` option, which will be active by default in 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` ``` This error occurs when state is updated while evaluating a `$derived`. You might encounter it while trying to 'derive' two pieces of state in one go: ```svelte count++}>{count}

{count} is even: {even}

{count} is odd: {odd}

``` This is forbidden because it introduces instability: if `

{count} is even: {even}

` is updated before `odd` is recalculated, `even` will be stale. In most cases the solution is to make everything derived: ```js let count = 0; // ---cut--- let even = $derived(count % 2 === 0); let odd = $derived(!even); ``` If side-effects are unavoidable, use [`$effect`]($effect) instead. ### svelte\_boundary\_reset\_onerror ``` A `` `reset` function cannot be called while an error is still being handled ``` If a [``](https://svelte.dev/docs/svelte/svelte-boundary) has an `onerror` function, it must not call the provided `reset` function synchronously since the boundary is still in a broken state. Typically, `reset()` is called later, once the error has been resolved. If it's possible to resolve the error inside the `onerror` callback, you must at least wait for the boundary to settle before calling `reset()`, for example using [`tick`](https://svelte.dev/docs/svelte/lifecycle-hooks#tick): ```svelte { fixTheError(); +++await tick();+++ reset(); }}> ``` ## Server errors ### lifecycle\_function\_unavailable ``` `%name%(...)` is not available on the server ``` Certain methods such as `mount` cannot be invoked while running in a server context. Avoid calling them eagerly, i.e. not during render. ## Shared errors ### await\_outside\_boundary ``` Cannot await outside a `` with a `pending` snippet ``` The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's `

{#each items as item}
• {@render children(item)}
{/each}

``` Here, `List.svelte` is using `{@render children(item)` which means it expects `Parent.svelte` to use snippets. Instead, `Parent.svelte` uses the deprecated `let:` directive. This combination of APIs is incompatible, hence the error. ### 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 ``` Certain lifecycle methods can only be used during component initialisation. To fix this, make sure you're invoking the method inside the *top level of the instance script* of your component. ```svelte click me ``` ### 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()}`. ``` A component throwing this error will look something like this (`children` is not being rendered): ```svelte {children} ``` ...or like this (a parent component is passing a snippet where a non-snippet value is expected): ```svelte {#snippet label()} Hi! {/snippet} ``` ```svelte

{label}

``` ### store\_invalid\_shape ``` `%name%` is not a store with a `subscribe` method ``` ### svelte\_element\_invalid\_this\_value ``` The `this` prop on `` must be a string, if defined ``` # Runtime warnings ## 客户警告 ### assignment\_value\_stale ``` Assignment to `%property%` property (%location%) will evaluate to the right-hand side, not the value of `%property%` following the assignment. This may result in unexpected behaviour. ``` 给定一个这样的案例... ```svelte add

items: {JSON.stringify(object.items)}

``` ...當按鈕第一次被點擊時，推送到的數組是作業右側的 `[]`，但 `object.array` 的結果是一個空狀態代理。因此，推送的值將被丟棄。 您可以通过将其分为两个语句来修复此问题： ```js let object = { array: [0] }; // ---cut--- function add() { object.array ??= []; object.array.push(object.array.length); } ``` ### await\_reactivity\_loss ``` Detected reactivity loss when reading `%name%`. This happens when state is read in an async function after an earlier `await` ``` Svelte 的基于信号的响应性是通过跟踪模板或`$derived(...)`表达式执行时读取哪些状态位来工作的。如果一个表达式包含一个`await`，Svelte 会将其转换，以便跟踪`await`之后的任何状态*之后*——换句话说，在这种情况下…… ```js let a = Promise.resolve(1); let b = 2; // ---cut--- let total = $derived(await a + b); ``` ...两个`a`和`b`都被跟踪，即使`b`只在`a`解决后读取一次，在初始执行之后。 这并不适用于表达式内部不可见的 *await*。在这种情况下... ```js let a = Promise.resolve(1); let b = 2; // ---cut--- async function sum() { return await a + b; } let total = $derived(await sum()); ``` ...`total` 将取决于 `a`（立即读取）但不取决于 `b`（不读取）。解决方案是将值传递给函数： ```js let a = Promise.resolve(1); let b = 2; // ---cut--- /** * @param {Promise} a * @param {number} b */ async function sum(a, b) { return await a + b; } let total = $derived(await sum(a, b)); ``` ### await\_waterfall ``` An async derived, `%name%` (%location%) was not read immediately after it resolved. This often indicates an unnecessary waterfall, which can slow down your app ``` 在这种情况下... ```js async function one() { return 1 } async function two() { return 2 } // ---cut--- let a = $derived(await one()); let b = $derived(await two()); ``` ...第二个`$derived`将在第一个解决后创建。由于`await two()`不依赖于`a`的值，这种延迟，通常描述为“瀑布”，是不必要的。 （请注意，如果 `await one()` 和 `await two()` 的值随后更改，它们可以同时更改——瀑布效应仅在派生值首次创建时发生。） 您可以通过先创建承诺并在 *之后* 等待它们来解决此问题： ```js async function one() { return 1 } async function two() { return 2 } // ---cut--- let aPromise = $derived(one()); let bPromise = $derived(two()); let a = $derived(await aPromise); let b = $derived(await bPromise); ``` ### 绑定属性非响应式 ``` `%binding%` is binding to a non-reactive property ``` ``` `%binding%` (%location%) is binding to a non-reactive property ``` ### 控制台日志状态 ``` Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead ``` 当记录一个 [代理](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 时，浏览器开发者工具将记录代理本身而不是它所代表的值。在 Svelte 的情况下，`$state` 代理的 'target' 可能与其当前值不相似，这可能会造成困惑。 最简单的方法记录值随时间变化的情况是使用 [`$inspect`](/docs/svelte/$inspect) 符文。或者，为了一次性记录某些内容（例如，在事件处理器内部），可以使用 [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) 来获取当前值的快照。 ### 事件处理程序无效 ``` %handler% should be a function. Did you mean to %suggestion%? ``` ### 水合属性已更改 ``` The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value ``` 某些属性，如`src`在``元素上，在激活过程中不会被修复，即服务器值将被保留。这是因为更新这些属性可能会导致图像被重新获取（或者在`