svelte/documentation/docs/98-reference/30-runtime-warnings.md

title	generated
Runtime warnings	generated by process-messages/index.js

binding_property_non_reactive

[!NOTE] '%binding%' is binding to a non-reactive property

[!NOTE] '%binding%' (%location%) is binding to a non-reactive property

console_log_state

[!NOTE] Your 'console.%method%' contained '$state' proxies. Consider using '$inspect(...)' or '$state.snapshot(...)' instead

When logging a 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.

The easiest way to log a value as it changes over time is to use the $inspect rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use $state.snapshot to take a snapshot of the current value.

dynamic_void_element_content

[!NOTE] '<svelte:element this="%tag%">' is a void element — it cannot have content

event_handler_invalid

[!NOTE] %handler% should be a function. Did you mean to %suggestion%?

hydration_attribute_changed

[!NOTE] 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

hydration_html_changed

[!NOTE] The value of an '{@html ...}' block changed between server and client renders. The client value will be ignored in favour of the server value

[!NOTE] 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

hydration_mismatch

[!NOTE] Hydration failed because the initial UI does not match what was rendered on the server

[!NOTE] Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%

invalid_raw_snippet_render

[!NOTE] The 'render' function passed to 'createRawSnippet' should return HTML for a single element

lifecycle_double_unmount

[!NOTE] Tried to unmount a component that was not mounted

ownership_invalid_binding

[!NOTE] %parent% passed a value to %child% with 'bind:', but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%

ownership_invalid_mutation

[!NOTE] 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

[!NOTE] %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_proxy_equality_mismatch

[!NOTE] Reactive '$state(...)' proxies and the values they proxy have different identities. Because of this, comparisons with '%operator%' will produce unexpected results

$state(...) creates a proxy of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return false:

<script>
	let value = { foo: 'bar' };
	let proxy = $state(value);

	value === proxy; // always false
</script>

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.

state_snapshot_uncloneable

[!NOTE] Value cannot be cloned with '$state.snapshot' — the original value was returned

[!NOTE] The following properties cannot be cloned with '$state.snapshot' — the return value contains the originals: %properties%