## Directories ### error_&_warning_reference Complete reference of all Svelte compiler and runtime error and warning codes with explanations and solutions. ## Error & Warning Reference Comprehensive reference for all Svelte compiler and runtime errors and warnings. ### Client-Side Errors **Reactivity & State** - `async_derived_orphan`: Async deriveds require effect context - `derived_references_self`: Derived values cannot reference themselves - `state_unsafe_mutation`: Cannot update state in `$derived`, `$inspect`, or template expressions; use `$effect` - `state_descriptors_fixed`: Property descriptors on `$state` objects must have `value` and be `enumerable`, `configurable`, `writable` - `effect_update_depth_exceeded`: Effect reads and writes same state causing infinite loop; use `untrack()` if necessary **Effects** - `effect_orphan`: Runes like `$effect` only work inside component initialization or other effects - `effect_in_teardown`: Cannot use runes inside effect cleanup functions - `effect_pending_outside_reaction`: `$effect.pending()` only works inside effects or deriveds - `flush_sync_in_effect`: Cannot call `flushSync()` inside an effect **Binding** - `bind_invalid_checkbox_value`: Use `bind:checked` instead of `bind:value` for checkboxes - `bind_not_bindable`: Mark properties as bindable: `let { key = $bindable() } = $props()` - `props_rest_readonly`: Rest element properties from `$props()` are readonly **Components & Lifecycle** - `component_api_invalid_new`: Cannot instantiate components with `new` in Svelte 5; set `compatibility.componentApi: 4` for legacy support - `set_context_after_init`: `setContext` must be called during component initialization, not in effects or after `await` - `lifecycle_legacy_only`: Legacy lifecycle functions cannot be used in runes mode **Other** - `each_key_duplicate`: Keyed each blocks have duplicate keys - `invalid_snippet`: Cannot render null/undefined snippet; use optional chaining `{@render snippet?.()}` - `svelte_boundary_reset_onerror`: `` reset function cannot be called synchronously in onerror; use `await tick()` first - `hydration_failed`: Application hydration failed ### Client-Side Warnings - `assignment_value_stale`: Nullish coalescing assignment (`??=`) evaluates to right-hand side, not assigned property; separate into two statements - `await_reactivity_loss`: State read in async functions after `await` may not be tracked; pass values as parameters - `await_waterfall`: Multiple async deriveds create unnecessary waterfalls; create promises first, then await them - `console_log_state`: Logging `$state` proxies shows proxy object; use `$inspect()` or `$state.snapshot()` instead - `hydration_mismatch`: Server-rendered HTML structure doesn't match client-rendered structure - `state_proxy_equality_mismatch`: `$state()` creates proxies with different identity; compare values created the same way or use `$state.raw()` - `transition_slide_display`: `slide` transition doesn't work with `display: inline`, `table`, or `contents` ### Compiler Errors **Animation** - `animation_duplicate`: Element can only have one `animate:` directive - `animation_invalid_placement`: Element using `animate:` must be only child of keyed `{#each}` block - `animation_missing_key`: Element using `animate:` must be in keyed `{#each}` block **Attributes** - `attribute_contenteditable_dynamic`: `contenteditable` cannot be dynamic with two-way binding - `attribute_duplicate`: Attributes must be unique - `attribute_invalid_event_handler`: Event attributes must be JavaScript expressions, not strings - `attribute_invalid_type`: `type` attribute must be static if input uses two-way binding - `attribute_invalid_multiple`: `multiple` attribute must be static if select uses two-way binding **Binding** - `bind_invalid_expression`: Can only bind to Identifier, MemberExpression, or `{get, set}` pair - `bind_invalid_target`: `bind:%name%` can only be used with specific elements - `bind_invalid_value`: Can only bind to state or props - `bind_group_invalid_expression`: `bind:group` can only bind to Identifier or MemberExpression **Blocks** - `block_duplicate_clause`: Block clause cannot appear more than once - `block_unclosed`: Block was left open - `block_invalid_placement`: `{#%name%}` block cannot be at this location **Const Tag** - `const_tag_cycle`: Cyclical dependency detected - `const_tag_invalid_placement`: `{@const}` must be immediate child of specific blocks/components - `const_tag_invalid_reference`: Const declaration not available in this snippet **Declarations** - `declaration_duplicate`: Variable already declared - `constant_assignment`: Cannot assign to constant - `constant_binding`: Cannot bind to constant **CSS** - `css_empty_declaration`: Declaration cannot be empty - `css_global_block_invalid_combinator`: `:global` selector cannot follow combinator - `css_global_block_invalid_declaration`: Top-level `:global {}` can only contain rules, not declarations - `css_global_invalid_selector`: `:global(...)` must contain exactly one selector - `css_nesting_selector_invalid_placement`: Nesting selectors only in rules or first in lone `:global(...)` **Derived/Export** - `derived_invalid_export`: Cannot export derived state from module; export function returning value instead - `state_invalid_export`: Cannot export state from module if reassigned; export function or only mutate properties **Each Block** - `each_item_invalid_assignment`: Cannot reassign/bind to each block argument in runes mode; use array/index instead - `each_key_without_as`: `{#each}` block without `as` clause cannot have key **Effect** - `effect_invalid_placement`: `$effect()` can only be used as expression statement **Event Handler** - `event_handler_invalid_modifier`: Invalid event modifier - `event_handler_invalid_modifier_combination`: Modifiers cannot be used together **Props** - `props_duplicate`: Cannot use `%rune%()` more than once - `props_invalid_identifier`: `$props()` only with object destructuring pattern - `props_invalid_pattern`: `$props()` assignment must not contain nested properties or computed keys - `props_invalid_placement`: `$props()` only at top level as variable declaration initializer **Rune** - `rune_invalid_arguments`: Rune cannot be called with arguments - `rune_invalid_name`: Not a valid rune - `rune_missing_parentheses`: Cannot use rune without parentheses - `rune_removed`: Rune has been removed - `rune_renamed`: Rune renamed to different name **Snippet** - `snippet_conflict`: Cannot use `` and `{@render}` tags in same component - `snippet_invalid_export`: Exported snippet can only reference things in `

{innerWidth.current}x{innerHeight.current}

``` ### svelte-reactivity Reactive wrappers for built-in JavaScript objects (Map, Set, Date, URL, URLSearchParams) and utilities for integrating external event systems with Svelte's reactivity. ## Reactive Built-ins - **SvelteMap, SvelteSet, SvelteDate, SvelteURL, SvelteURLSearchParams**: Reactive versions of standard objects. Reading their contents in effects/derived triggers re-evaluation. Values are not deeply reactive. - **MediaQuery** (5.7.0+): Reactive media query with `current` property. Prefer CSS media queries to avoid hydration issues. ## createSubscriber Integrates external event systems with Svelte reactivity. Accepts a `start` callback that receives an `update` function to trigger effect re-runs. Returns a cleanup function when the effect is destroyed. Multiple effects share one `start` call. ```js const subscribe = createSubscriber((update) => { const off = on(element, 'event', update); return () => off(); }); ``` ### svelte_server API for server-side rendering of Svelte components with the render function. ## render Server-side function to render Svelte components to HTML strings. ```js import { render } from 'svelte/server'; const { body, head } = render(Component, { props: {...}, context: new Map() }); ``` Returns object with `body` and `head` properties. Options include `props`, `context`, and `idPrefix`. ### svelte_store API reference for Svelte's reactive store system with writable, readable, and derived stores. ## Core Store Functions - **writable(initial)** - Read/write store with `.set()` and `.update()` - **readable(initial, start)** - Read-only store with optional lifecycle callback - **derived(sources, fn)** - Computed store from one or more sources - **get(store)** - Get current value synchronously - **readonly(store)** - Make a store read-only - **fromStore(store)** - Convert store to reactive `.current` property - **toStore(get, set?)** - Convert getter/setter to store All stores use `.subscribe(callback)` to listen for changes. Subscribers return an unsubscribe function. ### svelte_transition Built-in transition functions for animating element entry and exit in Svelte. ## Transition Functions Seven built-in transitions for animating element entry/exit: - **blur**, **fade**, **fly**, **scale**, **slide**, **draw** (SVG), **crossfade** (paired morphing) Common parameters: `delay`, `duration`, `easing`. Specific ones: `amount`/`opacity` (blur), `x`/`y`/`opacity` (fly), `start`/`opacity` (scale), `axis` (slide), `speed` (draw). Import: `import { blur, crossfade, draw, fade, fly, scale, slide } from 'svelte/transition'` ### compiler_errors_reference Complete reference of all Svelte compiler error codes with descriptions and explanations for each error type. ## Compiler Errors Reference Comprehensive list of Svelte compiler error codes organized by category: **Animation**: `animation_duplicate`, `animation_invalid_placement`, `animation_missing_key` **Attributes**: `attribute_contenteditable_dynamic`, `attribute_duplicate`, `attribute_invalid_event_handler`, `attribute_invalid_type`, `attribute_unquoted_sequence` **Bindings**: `bind_group_invalid_expression`, `bind_invalid_expression`, `bind_invalid_target`, `bind_invalid_value` **Blocks**: `block_duplicate_clause`, `block_invalid_placement`, `block_unclosed`, `block_unexpected_close` **CSS**: `css_empty_declaration`, `css_global_block_invalid_list`, `css_selector_invalid` **Const Tags**: `const_tag_cycle`, `const_tag_invalid_expression`, `const_tag_invalid_placement` **State**: `state_field_duplicate`, `state_invalid_export`, `state_invalid_placement` **Directives**: `directive_invalid_value`, `event_handler_invalid_modifier`, `style_directive_invalid_modifier` **Elements**: `element_unclosed`, `element_invalid_closing_tag`, `textarea_invalid_content`, `void_element_invalid_content` **Exports**: `export_undefined`, `derived_invalid_export`, `module_illegal_default_export` **Props/Runes**: `props_invalid_placement`, `rune_invalid_usage`, `rune_missing_parentheses`, `rune_renamed` **Snippets**: `snippet_invalid_export`, `snippet_parameter_assignment`, `render_tag_invalid_expression` **Slots**: `slot_attribute_invalid`, `slot_default_duplicate`, `slot_snippet_conflict` **Svelte Tags**: `svelte_component_missing_this`, `svelte_element_missing_this`, `svelte_fragment_invalid_placement`, `svelte_options_invalid_customelement` **Scripts**: `script_duplicate`, `style_duplicate` **Stores**: `store_invalid_subscription`, `store_invalid_subscription_module` **Other**: `dollar_binding_invalid`, `effect_invalid_placement`, `experimental_async`, `import_svelte_internal_forbidden`, `legacy_await_invalid`, `legacy_export_invalid`, `typescript_invalid_feature`, `unexpected_eof` ### compiler_warnings Reference of all Svelte compiler warnings with codes, descriptions, and how to suppress them using `` comments. ## Disabling Warnings ```svelte

...

``` ## Key Accessibility Warnings - **a11y_click_events_have_key_events**: Non-interactive elements with `onclick` need `onkeyup`/`onkeydown` + `tabindex` - **a11y_img_redundant_alt**: Alt text shouldn't say "image", "picture", or "photo" - **a11y_missing_attribute**: `` needs `href`, `` needs `alt`, `` needs `lang`, `