Skip to content

Commit 4578d4f

Browse files
docs: generate pages for compiler/runtime warnings/errors (#13557)
* docs: generate pages for compiler/runtime warnings/errors Ideally each warning has accompanying details so that it doesn't look so empty on the final site, but that can happen separately * fix * sort alphabetically, code ticks for headings * only uppercase first word * regenerate * generate codes using [!NOTE], remove any backticks and escape `<` characters * some prose preceeding the list of compiler warnings * bring over prose from Svelte 4 a11y warnings * fix * lint * remove backticks from headers, now that they are getting rendered * Revert "remove backticks from headers, now that they are getting rendered" This reverts commit c295281. * back to normal headers/code blocks * fix * separate authored from generated stuff * newlines --------- Co-authored-by: Rich Harris <[email protected]>
1 parent 1c8d1ca commit 4578d4f

File tree

13 files changed

+2406
-3
lines changed

13 files changed

+2406
-3
lines changed
Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
### bind_invalid_checkbox_value
2+
3+
```
4+
Using `bind:value` together with a checkbox input is not allowed. Use `bind:checked` instead
5+
```
6+
7+
### bind_invalid_export
8+
9+
```
10+
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%`)
11+
```
12+
13+
### bind_not_bindable
14+
15+
```
16+
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()`
17+
```
18+
19+
### component_api_changed
20+
21+
```
22+
%parent% called `%method%` on an instance of %component%, which is no longer valid in Svelte 5. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
23+
```
24+
25+
### component_api_invalid_new
26+
27+
```
28+
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-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
29+
```
30+
31+
### derived_references_self
32+
33+
```
34+
A derived value cannot reference itself recursively
35+
```
36+
37+
### each_key_duplicate
38+
39+
```
40+
Keyed each block has duplicate key at indexes %a% and %b%
41+
```
42+
43+
```
44+
Keyed each block has duplicate key `%value%` at indexes %a% and %b%
45+
```
46+
47+
### effect_in_teardown
48+
49+
```
50+
`%rune%` cannot be used inside an effect cleanup function
51+
```
52+
53+
### effect_in_unowned_derived
54+
55+
```
56+
Effect cannot be created inside a `$derived` value that was not itself created inside an effect
57+
```
58+
59+
### effect_orphan
60+
61+
```
62+
`%rune%` can only be used inside an effect (e.g. during component initialisation)
63+
```
64+
65+
### effect_update_depth_exceeded
66+
67+
```
68+
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
69+
```
70+
71+
### hydration_failed
72+
73+
```
74+
Failed to hydrate the application
75+
```
76+
77+
### invalid_snippet
78+
79+
```
80+
Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
81+
```
82+
83+
### lifecycle_legacy_only
84+
85+
```
86+
`%name%(...)` cannot be used in runes mode
87+
```
88+
89+
### props_invalid_value
90+
91+
```
92+
Cannot do `bind:%key%={undefined}` when `%key%` has a fallback value
93+
```
94+
95+
### props_rest_readonly
96+
97+
```
98+
Rest element properties of `$props()` such as `%property%` are readonly
99+
```
100+
101+
### rune_outside_svelte
102+
103+
```
104+
The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
105+
```
106+
107+
### state_descriptors_fixed
108+
109+
```
110+
Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
111+
```
112+
113+
### state_prototype_fixed
114+
115+
```
116+
Cannot set prototype of `$state` object
117+
```
118+
119+
### state_unsafe_local_read
120+
121+
```
122+
Reading state that was created inside the same derived is forbidden. Consider using `untrack` to read locally created state
123+
```
124+
125+
### state_unsafe_mutation
126+
127+
```
128+
Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state`
129+
```
Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
### binding_property_non_reactive
2+
3+
```
4+
`%binding%` is binding to a non-reactive property
5+
```
6+
7+
```
8+
`%binding%` (%location%) is binding to a non-reactive property
9+
```
10+
11+
### console_log_state
12+
13+
```
14+
Your `console.%method%` contained `$state` proxies. Consider using `$inspect(...)` or `$state.snapshot(...)` instead
15+
```
16+
17+
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.
18+
19+
The easiest way to log a value as it changes over time is to use the [`$inspect`](https://svelte-5-preview.vercel.app/docs/runes#$inspect) rune. Alternatively, to log things on a one-off basis (for example, inside an event handler) you can use [`$state.snapshot`](https://svelte-5-preview.vercel.app/docs/runes#$state-snapshot) to take a snapshot of the current value.
20+
21+
### event_handler_invalid
22+
23+
```
24+
%handler% should be a function. Did you mean to %suggestion%?
25+
```
26+
27+
### hydration_attribute_changed
28+
29+
```
30+
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
31+
```
32+
33+
### hydration_html_changed
34+
35+
```
36+
The value of an `{@html ...}` block changed between server and client renders. The client value will be ignored in favour of the server value
37+
```
38+
39+
```
40+
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
41+
```
42+
43+
### hydration_mismatch
44+
45+
```
46+
Hydration failed because the initial UI does not match what was rendered on the server
47+
```
48+
49+
```
50+
Hydration failed because the initial UI does not match what was rendered on the server. The error occurred near %location%
51+
```
52+
53+
### invalid_raw_snippet_render
54+
55+
```
56+
The `render` function passed to `createRawSnippet` should return HTML for a single element
57+
```
58+
59+
### lifecycle_double_unmount
60+
61+
```
62+
Tried to unmount a component that was not mounted
63+
```
64+
65+
### ownership_invalid_binding
66+
67+
```
68+
%parent% passed a value to %child% with `bind:`, but the value is owned by %owner%. Consider creating a binding between %owner% and %parent%
69+
```
70+
71+
### ownership_invalid_mutation
72+
73+
```
74+
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
75+
```
76+
77+
```
78+
%component% mutated a value owned by %owner%. This is strongly discouraged. Consider passing values to child components with `bind:`, or use a callback instead
79+
```
80+
81+
### state_proxy_equality_mismatch
82+
83+
```
84+
Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
85+
```
86+
87+
`$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`:
88+
89+
```svelte
90+
<script>
91+
let value = { foo: 'bar' };
92+
let proxy = $state(value);
93+
94+
value === proxy; // always false
95+
</script>
96+
```
97+
98+
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.

0 commit comments

Comments
 (0)