diff --git a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md index f366cb96f0..1f6c7598df 100644 --- a/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md +++ b/apps/svelte.dev/content/docs/svelte/98-reference/30-runtime-warnings.md @@ -2,162 +2,131 @@ title: 'Runtime warnings' --- -## Client errors +## Client warnings -### bind_invalid_checkbox_value +### binding_property_non_reactive ``` -Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead +`%binding%` is binding to a non-reactive property ``` -### 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()` +`%binding%` (%location%) is binding to a non-reactive property ``` -### component_api_changed +### console_log_state ``` -%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information +Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead ``` -### component_api_invalid_new +When logging a [proxy](https://developer.mozilla.org/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. -``` -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 https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes for more information -``` +The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte.dev/docs/svelte/$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte.dev/docs/svelte/$state#$state.snapshot) to take a snapshot of the current value. -### derived_references_self +### event_handler_invalid ``` -A derived value cannot reference itself recursively +%handler% should be a function. Did you mean to %suggestion%? ``` -### each_key_duplicate - -``` -Keyed each block has duplicate key at indexes %a% and %b% -``` +### hydration_attribute_changed ``` -Keyed each block has duplicate key `%value%` at indexes %a% and %b% +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 ``` -### effect_in_teardown +### hydration_html_changed ``` -`%rune%` cannot be used inside an effect cleanup function +The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value ``` -### effect_in_unowned_derived - ``` -Effect cannot be created inside a `$derived` value that was not itself created inside an effect +The value of an `{@html ...}` block %location% changed between server and client renders. The client value will be ignored in favour of the server value ``` -### effect_orphan +### hydration_mismatch ``` -`%rune%` can only be used inside an effect (e.g. during component initialisation) +Hydration failed because the initial UI does not match what was rendered on the server ``` -### 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 because the initial UI does not match what was rendered on the server. The error occurred near %location% ``` -### hydration_failed +### invalid_raw_snippet_render ``` -Failed to hydrate the application +The `render` function passed to `createRawSnippet` should return HTML for a single element ``` -### invalid_snippet +### legacy_recursive_reactive_block ``` -Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}` +Detected a migrated `$:` reactive block in `%filename%` that both accesses and updates the same reactive value. This may cause recursive updates when converted to an `$effect`. ``` -### lifecycle_legacy_only +### lifecycle_double_unmount ``` -`%name%(...)` cannot be used in runes mode +Tried to unmount a component that was not mounted ``` -### props_invalid_value +### ownership_invalid_binding ``` -Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value +%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent% ``` -### props_rest_readonly +### ownership_invalid_mutation ``` -Rest element properties of `$props()` such as `%property%` are readonly +Mutating a value outside the component that created it is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead ``` -### rune_outside_svelte - ``` -The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files +%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead ``` -### state_descriptors_fixed +### state_proxy_equality_mismatch ``` -Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`. +Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results ``` -### state_prototype_fixed - -``` -Cannot set prototype of `$state` object -``` +`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`: -### state_unsafe_local_read +```svelte + ``` -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` -``` +To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy. -## Shared errors +## Shared warnings -### invalid_default_snippet +### dynamic_void_element_content ``` -Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead +`` is a void element — it cannot have content ``` -### lifecycle_outside_component +### state_snapshot_uncloneable ``` -`%name%(...)` can only be used during component initialisation +Value cannot be cloned with `$state.snapshot` — the original value was returned ``` -### store_invalid_shape - ``` -`%name%` is not a store with a `subscribe` method -``` - -### svelte_element_invalid_this_value +The following properties cannot be cloned with `$state.snapshot` — the return value contains the originals: -``` -The `this` prop on `` must be a string, if defined +%properties% ```