option a

` 被删除） - `

cell

` 将结果为 `

cell

`（会自动插入 ``） 当组件在客户端呈现时，此代码将正常工作（这就是为什么这是一个警告而不是错误），但如果您使用服务器呈现，它将导致水合失败。 ### non_reactive_update ``` `%name%` 被更新，但未用 `$state(...)` 声明。改变其值将无法正确触发更新 ``` 当编译器检测到以下内容时，将抛出此警告： - 变量在没有 `$state` 或 `$state.raw` 的情况下声明 - 变量被重新赋值 - 在响应式上下文中读取变量 在这种情况下，改变值不会正确触发更新。示例： ```svelte

此值更新：{reactive}

此值不会更新：{stale}

{ stale = 'updated'; reactive = 'updated'; }}>更新 ``` 要修复此问题，请将变量声明包装在 `$state` 内。 ### options_deprecated_accessors ``` `accessors` 选项已弃用。在 runes 模式下无效 ``` ### options_deprecated_immutable ``` `immutable` 选项已弃用。在 runes 模式下无效 ``` ### options_missing_custom_element ``` `customElement` 选项在生成自定义元素时使用。您是否忘记了 `customElement: true` 编译选项？ ``` ### options_removed_enable_sourcemap ``` `enableSourcemap` 选项已被删除。现在总是生成源地图，工具可以选择忽略它们 ``` ### options_removed_hydratable ``` `hydratable` 选项已被删除。Svelte 组件现在总是可水合的 ``` ### options_removed_loop_guard_timeout ``` `loopGuardTimeout` 选项已被删除 ``` ### options_renamed_ssr_dom ``` `generate: "dom"` 和 `generate: "ssr"` 选项已更名为 "client" 和 "server" ``` ### perf_avoid_inline_class ``` 避免使用 'new class' — 相反，在顶层作用域声明类 ``` ### perf_avoid_nested_class ``` 避免在顶层作用域下方声明类 ``` ### reactive_declaration_invalid_placement ``` 响应式声明仅存在于实例脚本的顶层 ``` ### reactive_declaration_module_script_dependency ``` 模块级声明的重新分配不会导致响应式语句更新 ``` ### script_context_deprecated ``` `context="module"` 已弃用，请改用 `module` 属性 ``` ```svelte ``` ### script_unknown_attribute ``` 未识别的属性 — 应为 `generics`、`lang` 或 `module`。如果这是预处理器的情况，请确保预处理器删除它 ``` ### slot_element_deprecated ``` 使用 `` 渲染父内容已弃用。请改用 `{@render ...}` 标签 ``` 有关更多信息，请参见 [迁移指南](v5-migration-guide#Snippets-instead-of-slots)。 ### state_referenced_locally ``` 在其自身作用域中引用的状态将永远不会更新。您是否想在闭包内部引用它？ ``` 当编译器检测到以下情况时，将抛出此警告： - 声明了一个响应式变量 - 变量被重新赋值 - 在声明变量的相同作用域中引用变量，且为非响应式上下文 在这种情况下，状态重赋值不会被您传递的任何内容注意到。例如，如果您将状态传递给一个函数，则该函数不会注意到更新： ```svelte count++}> 递增 ``` ```svelte

当前计数为 {count}

``` 要修复此问题，请引用变量，以便它可以懒惰地计算。对于上述示例，可以通过将 `count` 包装在函数中来完成： ```svelte count++}> 递增 ``` ```svelte

当前计数为 {+++count()+++}

``` 有关更多信息，请参见 [将状态传递给函数]($state#Passing-state-into-functions)。 ### store_rune_conflict ``` 看起来您正在使用 `$%name%` 符文，但存在一个名为 `%name%` 的本地绑定。使用 `$` 前缀引用本地变量会创建一个存储订阅。请重命名 `%name%` 以避免歧义 ``` ### svelte_component_deprecated ``` `` 在 runes 模式中已弃用 — 组件默认为动态 ``` 在 Svelte 的早期版本中，当组件呈现时，组件构造函数是固定的。换句话说，如果您希望 `` 在 `X` 更改时重新呈现，则必须使用 `` 或将组件放入 `{#key X}...{/key}` 块中。 在 Svelte 5 中，这不再成立 — 如果 `X` 更改，`` 会重新呈现。 在某些情况下，可以使用 `` 语法作为替代；带有属性访问的转小写变量在 Svelte 5 中被识别为组件。 对于复杂的组件解析逻辑，可能需要一个中间的首字母大写的变量。例如，在可以使用 `@const` 的地方： ```svelte {#each items as item} ------ +++{@const Component = item.condition ? Y : Z}+++ ++++++ {/each} ``` 派生值可以在其他上下文中使用： ```svelte ------ ++++++ ``` ### svelte_element_invalid_this ``` `this` 应为 `{expression}`。在未来版本的 Svelte 中使用字符串属性值将导致错误 ``` ### svelte_self_deprecated ``` `` 已弃用 — 请改用自我导入（例如 `import %name% from './%basename%'`） ``` 有关更多信息，请参见 [文档中的说明](legacy-svelte-self)。 ### unknown_code ``` `%code%` 不是已识别的代码 ``` ``` `%code%` 不是已识别的代码（您是指 `%suggestion%` 吗？） ``` # 运行时错误 ## 客户端错误 ### bind_invalid_checkbox_value ``` 不允许将 `bind:value` 与复选框输入一起使用。请改用 `bind:checked` ``` ### bind_invalid_export ``` 组件 %component% 有一个名为 `%key%` 的导出，消费组件试图使用 `bind:%key%` 访问它，这是不允许的。相反，请使用 `bind:this`（例如 `<%name% bind:this={component} />`），然后在绑定的组件实例上访问属性（例如 `component.%key%`） ``` ### bind_not_bindable ``` 一个组件试图绑定到属于 %component% 的不可绑定属性 `%key%`（即 `<%name% bind:%key%={...}>`）。要将属性标记为可绑定：`let { %key% = $bindable() } = $props()` ``` ### component_api_changed ``` %parent% 在 %component% 的实例上调用了 `%method%`，这在 Svelte 5 中不再有效 ``` 更多信息请参见[迁移指南](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)。 ### component_api_invalid_new ``` 试图使用 `new %name%` 实例化 %component%，这在 Svelte 5 中不再有效。如果此组件不在您的控制范围内，请将 `compatibility.componentApi` 编译器选项设置为 `4` 以保持其功能。 ``` 更多信息请参见[迁移指南](/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)。 ### derived_references_self ``` 派生值不能递归地引用自身 ``` ### each_key_duplicate ``` 键控的 each 块在索引 %a% 和 %b% 处有重复的键 ``` ``` 键控的 each 块在索引 %a% 和 %b% 处有重复的键 `%value%` ``` ### effect_in_teardown ``` 不能在效果清理函数内使用 `%rune%` ``` ### effect_in_unowned_derived ``` 不能在未在效果内创建的 `$derived` 值内创建效果 ``` ### effect_orphan ``` `%rune%` 只能在效果内使用（例如在组件初始化期间） ``` ### effect_update_depth_exceeded ``` 超出最大更新深度。当响应式块或效果重复设置新值时，可能会发生这种情况。Svelte 限制嵌套更新的数量以防止无限循环 ``` ### hydration_failed ``` 应用程序水合失败 ``` ### invalid_snippet ``` 由于表达式为 `null` 或 `undefined`，无法 `{@render}` 片段。考虑使用可选链接 `{@render snippet?.()}` ``` ### lifecycle_legacy_only ``` 在 runes 模式下不能使用 `%name%(...)` ``` ### props_invalid_value ``` 当 `%key%` 有回退值时，不能使用 `bind:%key%={undefined}` ``` ### props_rest_readonly ``` `$props()` 的剩余元素属性（如 `%property%`）是只读的 ``` ### rune_outside_svelte ``` `%rune%` 符文仅在 `.svelte` 和 `.svelte.js/ts` 文件中可用 ``` ### state_descriptors_fixed ``` 在 `$state` 对象上定义的属性描述符必须包含 `value` 并始终是 `enumerable`、`configurable` 和 `writable`。 ``` ### state_prototype_fixed ``` 无法设置 `$state` 对象的原型 ``` ### state_unsafe_local_read ``` 禁止读取在同一派生内创建的状态。考虑使用 `untrack` 来读取本地创建的状态 ``` ### state_unsafe_mutation ``` 禁止在派生或模板表达式内更新状态。如果该值不应该是响应式的，请在声明时不使用 `$state` ``` ## 服务器错误 ### lifecycle_function_unavailable ``` `%name%(...)` 在服务器端不可用 ``` 某些方法（如 `mount`）在服务器环境下运行时无法调用。避免急切调用它们，即不要在渲染期间调用。 ## 共享错误 ### invalid_default_snippet ``` 如果父组件使用 `let:` 指令，则无法使用 `{@render children(...)}`。考虑使用命名片段代替 ``` 在这样的设置中会抛出这个错误： ```svelte {entry} ``` ```svelte

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

``` 这里，`List.svelte` 使用 `{@render children(item)`，这意味着它期望 `Parent.svelte` 使用片段。相反，`Parent.svelte` 使用了已弃用的 `let:` 指令。这种 API 组合是不兼容的，因此出现错误。 ### lifecycle_outside_component ``` `%name%(...)` 只能在组件初始化期间使用 ``` 某些生命周期方法只能在组件初始化期间使用。要修复此问题，请确保您在组件的 _实例脚本的顶层_ 调用该方法。 ```svelte 点击我 ``` ### store_invalid_shape ``` `%name%` 不是具有 `subscribe` 方法的 store ``` ### svelte_element_invalid_this_value ``` `` 上的 `this` 属性必须是字符串（如果已定义） ``` # 运行时警告 ## 客户端警告 ### assignment_value_stale ``` 对 `%property%` 属性 (%location%) 的赋值将计算右侧，而不是赋值后 `%property%` 的值。这可能导致意外行为。 ``` 考虑这样一个情况... ```svelte 添加

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

``` ...当按钮第一次被点击时，正在推送到的数组是赋值右侧的 `[]`，但 `object.array` 的最终值是一个空的状态代理。因此，被推送的值将被丢弃。 你可以通过将其分为两个语句来修复此问题： ```js let object = { array: [0] }; // ---cut--- function add() { object.array ??= []; object.array.push(object.array.length); } ``` ### binding_property_non_reactive ``` `%binding%` 绑定到非响应式属性 ``` ``` `%binding%` (%location%) 绑定到非响应式属性 ``` ### console_log_state ``` 你的 `console.%method%` 包含了 `$state` 代理。考虑使用 `$inspect(...)` 或 `$state.snapshot(...)` 代替 ``` 在记录一个 [代理](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 时，浏览器开发工具将记录代理本身，而不是它所表示的值。在 Svelte 中，`$state` 代理的“目标”可能与其当前值不符，这可能会造成混淆。 记录一个值随着时间变化的最简单方法是使用 [`$inspect`](/docs/svelte/$inspect) 符文。或者，为了临时记录某些事情（例如，在事件处理程序内部）你可以使用 [`$state.snapshot`](/docs/svelte/$state#$state.snapshot) 来获取当前值的快照。 ### event_handler_invalid ``` %handler% 应该是一个函数。你是想 %suggestion% 吗？ ``` ### hydration_attribute_changed ``` 在服务器和客户端渲染之间，`%html%` 上的 `%attribute%` 属性更改了其值。客户端值 `%value%` 将被忽略，以服务器值为准 ``` 某些属性（如`` 元素上的 `src`）在水合期间不会被修复，即服务器值将被保留。这是因为更新这些属性可能导致图像被重新获取（或者在 `