--- NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts title: 'Compiler errors' --- ### animation_duplicate ``` An element can only have one 'animate' directive ``` ### animation_invalid_placement ``` An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block ``` ### animation_missing_key ``` An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block. Did you forget to add a key to your each block? ``` ### attribute_contenteditable_dynamic ``` 'contenteditable' attribute cannot be dynamic if element uses two-way binding ``` ### attribute_contenteditable_missing ``` 'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings ``` ### attribute_duplicate ``` Attributes need to be unique ``` ### attribute_empty_shorthand ``` Attribute shorthand cannot be empty ``` ### attribute_invalid_event_handler ``` Event attribute must be a JavaScript expression, not a string ``` ### attribute_invalid_multiple ``` 'multiple' attribute must be static if select uses two-way binding ``` ### attribute_invalid_name ``` '%name%' is not a valid attribute name ``` ### attribute_invalid_sequence_expression ``` Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses ``` ### attribute_invalid_type ``` 'type' attribute must be a static text value if input uses two-way binding ``` ### attribute_unquoted_sequence ``` Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression ``` ### bind_group_invalid_expression ``` `bind:group` can only bind to an Identifier or MemberExpression ``` ### bind_group_invalid_snippet_parameter ``` Cannot `bind:group` to a snippet parameter ``` ### bind_invalid_expression ``` Can only bind to an Identifier or MemberExpression or a `{get, set}` pair ``` ### bind_invalid_name ``` `bind:%name%` is not a valid binding ``` ``` `bind:%name%` is not a valid binding. %explanation% ``` ### bind_invalid_parens ``` `bind:%name%={get, set}` must not have surrounding parentheses ``` ### bind_invalid_target ``` `bind:%name%` can only be used with %elements% ``` ### bind_invalid_value ``` Can only bind to state or props ``` ### bindable_invalid_location ``` `$bindable()` can only be used inside a `$props()` declaration ``` ### block_duplicate_clause ``` %name% cannot appear more than once within a block ``` ### block_invalid_continuation_placement ``` {:...} block is invalid at this position (did you forget to close the preceding element or block?) ``` ### block_invalid_elseif ``` 'elseif' should be 'else if' ``` ### block_invalid_placement ``` {#%name% ...} block cannot be %location% ``` ### block_unclosed ``` Block was left open ``` ### block_unexpected_character ``` Expected a `%character%` character immediately following the opening bracket ``` ### block_unexpected_close ``` Unexpected block closing tag ``` ### component_invalid_directive ``` This type of directive is not valid on components ``` ### const_tag_cycle ``` Cyclical dependency detected: %cycle% ``` ### const_tag_invalid_expression ``` {@const ...} must consist of a single variable declaration ``` ### const_tag_invalid_placement ``` `{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, ``, `` ``` ### const_tag_invalid_reference ``` The `{@const %name% = ...}` declaration is not available in this snippet ``` The following is an error: ```svelte {@const foo = 'bar'} {#snippet failed()} {foo} {/snippet} ``` Here, `foo` is not available inside `failed`. The top level code inside `` becomes part of the implicit `children` snippet, in other words the above code is equivalent to this: ```svelte {#snippet children()} {@const foo = 'bar'} {/snippet} {#snippet failed()} {foo} {/snippet} ``` The same applies to components: ```svelte {@const foo = 'bar'} {#snippet someProp()} {foo} {/snippet} ``` ### constant_assignment ``` Cannot assign to %thing% ``` ### constant_binding ``` Cannot bind to %thing% ``` ### css_empty_declaration ``` Declaration cannot be empty ``` ### css_expected_identifier ``` Expected a valid CSS identifier ``` ### css_global_block_invalid_combinator ``` A `:global` selector cannot follow a `%name%` combinator ``` ### css_global_block_invalid_declaration ``` A top-level `:global {...}` block can only contain rules, not declarations ``` ### css_global_block_invalid_list ``` A `:global` selector cannot be part of a selector list with entries that don't contain `:global` ``` The following CSS is invalid: ```css :global, x { y { color: red; } } ``` This is mixing a `:global` block, which means "everything in here is unscoped", with a scoped selector (`x` in this case). As a result it's not possible to transform the inner selector (`y` in this case) into something that satisfies both requirements. You therefore have to split this up into two selectors: ```css :global { y { color: red; } } x y { color: red; } ``` ### css_global_block_invalid_modifier ``` A `:global` selector cannot modify an existing selector ``` ### css_global_block_invalid_modifier_start ``` A `:global` selector can only be modified if it is a descendant of other selectors ``` ### css_global_block_invalid_placement ``` A `:global` selector cannot be inside a pseudoclass ``` ### css_global_invalid_placement ``` `:global(...)` can be at the start or end of a selector sequence, but not in the middle ``` ### css_global_invalid_selector ``` `:global(...)` must contain exactly one selector ``` ### css_global_invalid_selector_list ``` `:global(...)` must not contain type or universal selectors when used in a compound selector ``` ### css_nesting_selector_invalid_placement ``` Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)` ``` ### css_selector_invalid ``` Invalid selector ``` ### css_type_selector_invalid_placement ``` `:global(...)` must not be followed by a type selector ``` ### debug_tag_invalid_arguments ``` {@debug ...} arguments must be identifiers, not arbitrary expressions ``` ### declaration_duplicate ``` `%name%` has already been declared ``` ### declaration_duplicate_module_import ``` Cannot declare a variable with the same name as an import inside ` {#each array as entry} {/each} ``` This turned out to be buggy and unpredictable, particularly when working with derived values (such as `array.map(...)`), and as such is forbidden in runes mode. You can achieve the same outcome by using the index instead: ```svelte {#each array as entry, i} {/each} ``` ### each_key_without_as ``` An `{#each ...}` block without an `as` clause cannot have a key ``` ### effect_invalid_placement ``` `$effect()` can only be used as an expression statement ``` ### element_invalid_closing_tag ``` `` attempted to close an element that was not open ``` ### element_invalid_closing_tag_autoclosed ``` `` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`) ``` ### element_unclosed ``` `<%name%>` was left open ``` ### event_handler_invalid_component_modifier ``` Event modifiers other than 'once' can only be used on DOM elements ``` ### event_handler_invalid_modifier ``` Valid event modifiers are %list% ``` ### event_handler_invalid_modifier_combination ``` The '%modifier1%' and '%modifier2%' modifiers cannot be used together ``` ### expected_attribute_value ``` Expected attribute value ``` ### expected_block_type ``` Expected 'if', 'each', 'await', 'key' or 'snippet' ``` ### expected_identifier ``` Expected an identifier ``` ### expected_pattern ``` Expected identifier or destructure pattern ``` ### expected_token ``` Expected token %token% ``` ### expected_whitespace ``` Expected whitespace ``` ### experimental_async ``` Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true` ``` ### export_undefined ``` `%name%` is not defined ``` ### global_reference_invalid ``` `%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%` ``` ### host_invalid_placement ``` `$host()` can only be used inside custom element component instances ``` ### illegal_element_attribute ``` `<%name%>` does not support non-event attributes or spread attributes ``` ### import_svelte_internal_forbidden ``` Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case ``` ### inspect_trace_generator ``` `$inspect.trace(...)` cannot be used inside a generator function ``` ### inspect_trace_invalid_placement ``` `$inspect.trace(...)` must be the first statement of a function body ``` ### invalid_arguments_usage ``` The arguments keyword cannot be used within the template or at the top level of a component ``` ### js_parse_error ``` %message% ``` ### legacy_await_invalid ``` Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode ``` ### legacy_export_invalid ``` Cannot use `export let` in runes mode — use `$props()` instead ``` ### legacy_props_invalid ``` Cannot use `$$props` in runes mode ``` ### legacy_reactive_statement_invalid ``` `$:` is not allowed in runes mode, use `$derived` or `$effect` instead ``` ### legacy_rest_props_invalid ``` Cannot use `$$restProps` in runes mode ``` ### let_directive_invalid_placement ``` `let:` directive at invalid position ``` ### mixed_event_handler_syntaxes ``` Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax ``` ### module_illegal_default_export ``` A component cannot have a default export ``` ### node_invalid_placement ``` %message%. The browser will 'repair' the HTML (by moving, removing, or inserting elements) which breaks Svelte's assumptions about the structure of your components. ``` HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples: - `

hello

world

` will result in `

hello

world

` (the `

` autoclosed the `

` because `

` cannot contain block-level elements) - `

option a

` will result in `` (the `

` is removed) - `

cell

` will result in `

cell

` (a `` is auto-inserted) ### options_invalid_value ``` Invalid compiler option: %details% ``` ### options_removed ``` Invalid compiler option: %details% ``` ### options_unrecognised ``` Unrecognised compiler option %keypath% ``` ### props_duplicate ``` Cannot use `%rune%()` more than once ``` ### props_id_invalid_placement ``` `$props.id()` can only be used at the top level of components as a variable declaration initializer ``` ### props_illegal_name ``` Declaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals) ``` ### props_invalid_identifier ``` `$props()` can only be used with an object destructuring pattern ``` ### props_invalid_pattern ``` `$props()` assignment must not contain nested properties or computed keys ``` ### props_invalid_placement ``` `$props()` can only be used at the top level of components as a variable declaration initializer ``` ### reactive_declaration_cycle ``` Cyclical dependency detected: %cycle% ``` ### render_tag_invalid_call_expression ``` Calling a snippet function using apply, bind or call is not allowed ``` ### render_tag_invalid_expression ``` `{@render ...}` tags can only contain call expressions ``` ### render_tag_invalid_spread_argument ``` cannot use spread arguments in `{@render ...}` tags ``` ### rune_invalid_arguments ``` `%rune%` cannot be called with arguments ``` ### rune_invalid_arguments_length ``` `%rune%` must be called with %args% ``` ### rune_invalid_computed_property ``` Cannot access a computed property of a rune ``` ### rune_invalid_name ``` `%name%` is not a valid rune ``` ### rune_invalid_spread ``` `%rune%` cannot be called with a spread argument ``` ### rune_invalid_usage ``` Cannot use `%rune%` rune in non-runes mode ``` ### rune_missing_parentheses ``` Cannot use rune without parentheses ``` ### rune_removed ``` The `%name%` rune has been removed ``` ### rune_renamed ``` `%name%` is now `%replacement%` ``` ### runes_mode_invalid_import ``` %name% cannot be used in runes mode ``` ### script_duplicate ``` A component can have a single top-level ` {#snippet greeting(name)}

{message} {name}!

{/snippet} ``` ...because `greeting` references `message`, which is defined in the second `

Compiler Errors Reference