` is removed) * `

cell

` 将导致 `

cell

`（`` 自动插入） ¥`

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: * 声明的变量没有 `$state` 或 `$state.raw` ¥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 ``` 要解决此问题，请用 `$state` 封装变量声明。 ¥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 ``` 有关更多信息，请参阅 [迁移指南](v5-migration-guide#Snippets-instead-of-slots)。 ¥See [the migration guide](v5-migration-guide#Snippets-instead-of-slots) for more info. ### state\_referenced\_locally ``` State referenced in its own scope will never update. Did you mean to reference it inside a closure? ``` 当编译器检测到以下情况时，会抛出此警告： ¥This warning is thrown when the compiler detects the following: * 声明了一个反应变量 ¥A reactive variable is declared * 变量被重新分配 ¥the variable is reassigned * 变量在声明的相同范围内引用，并且它是非反应性上下文 ¥the variable is referenced inside the same scope it is declared and it is a non-reactive context 在这种情况下，无论你将状态重新分配传递给什么，都不会注意到它。例如，如果你将状态传递给函数，该函数将不会注意到更新： ¥In this case, the state reassignment will not be noticed by whatever you passed it to. For example, if you pass the state to a function, that function will not notice the updates: ```svelte count++}> increment ``` ```svelte

The count is {count}

``` 要修复此问题，请引用变量，以便对其进行延迟评估。对于上述示例，可以通过将 `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()+++}

``` 有关更多信息，请参阅 [将状态传递给函数]($state#Passing-state-into-functions)。 ¥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 ``` 在以前版本的 Svelte 中，组件构造函数在渲染组件时已修复。换句话说，如果你希望 `` 在 `X` 更改时重新渲染，你要么必须使用 ``，要么将组件放在 `{#key X}...{/key}` 块内。 ¥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. 在 Svelte 5 中，这不再是事实 - 如果 `X` 发生变化，`` 会重新渲染。 ¥In Svelte 5 this is no longer true — if `X` changes, `` re-renders. 在某些情况下，可以使用 `` 语法作为替代；在 Svelte 5 中，具有属性访问的小写变量被识别为组件。 ¥In some cases `` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5. 对于复杂的组件解析逻辑，可能需要一个中间的大写变量。例如在可以使用 `@const` 的地方： ¥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 ``` 有关更多信息，请参阅 [文档中的注释](legacy-svelte-self)。 ¥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%`?) ``` # ‘运行时错误’ ## 客户端错误(Client errors) ¥Client errors ### 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 ``` %parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5 ``` 请参阅 [迁移指南](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) 了解更多信息。 ¥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. ``` 请参阅 [迁移指南](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) 了解更多信息。 ¥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\_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 ``` ### 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 ``` ### 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\_local\_read ``` Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state ``` ### state\_unsafe\_mutation ``` Updating state inside a derived or a template expression is forbidden. If the value should not be reactive, declare it without `$state` ``` ## 服务器错误(Server errors) ¥Server errors ### lifecycle\_function\_unavailable ``` `%name%(...)` is not available on the server ``` 某些方法（如 `mount`）在服务器上下文中运行时无法调用。避免预调用它们，即不在渲染期间调用。 ¥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) ¥Shared errors ### invalid\_default\_snippet ``` Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead ``` 此错误将在以下设置中抛出： ¥This error would be thrown in a setup like this: ```svelte {entry} ``` ```svelte

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

``` 这里，`List.svelte` 正在使用 `{@render children(item)`，这意味着它期望 `Parent.svelte` 使用片段。相反，`Parent.svelte` 使用已弃用的 `let:` 指令。这种 API 组合不兼容，因此出现错误。 ¥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. ### 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 ``` ### 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 ``` # ‘运行时警告’ ## 客户端警告(Client warnings) ¥Client 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. ``` 假设这种情况…… ¥Given a case like this... ```svelte add

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

``` ...首次单击按钮时推送到的数组是分配右侧的 `[]`，但 `object.array` 的结果值是空状态代理。因此，推送的值将被丢弃。 ¥...the array being pushed to when the button is first clicked is the `[]` on the right-hand side of the assignment, but the resulting value of `object.array` is an empty state proxy. As a result, the pushed value will be discarded. 你可以通过将其分成两个语句来解决这个问题： ¥You can fix this by separating it into two statements: ```js let object = { array: [0] }; // ---cut--- function add() { object.array ??= []; object.array.push(object.array.length); } ``` ### binding\_property\_non\_reactive ``` `%binding%` is binding to a non-reactive property ``` ``` `%binding%` (%location%) is binding to a non-reactive property ``` ### console\_log\_state ``` Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead ``` 记录 [proxy](https://web.nodejs.cn/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 时，浏览器 devtools 将记录代理本身而不是它所代表的值。在 Svelte 的情况下，`$state` 代理的 'target' 可能与其当前值不相似，这可能会造成混淆。 ¥When logging a [proxy](https://web.nodejs.cn/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy), browser devtools will log the proxy itself rather than the value it represents. In the case of Svelte, the 'target' of a `$state` proxy might not resemble its current value, which can be confusing. 记录随时间变化的值的最简单方法是使用 [`$inspect`](/docs/svelte/$inspect) 符文。或者，要一次性记录内容（例如，在事件处理程序内部），你可以使用 [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) 获取当前值的快照。 ¥The easiest way to log a value as it changes over time is to use the [`$inspect`](/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value. ### event\_handler\_invalid ``` %handler% should be a function. Did you mean to %suggestion%? ``` ### hydration\_attribute\_changed ``` 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`）在水化期间不会被修复，即服务器值将被保留。这是因为更新这些属性可能会导致重新获取图片（或者在 `