An element can only have one 'animate' directive
An element that uses the `animate:` directive must be the only child of a keyed `{#each ...}` block
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?
'contenteditable' attribute cannot be dynamic if element uses two-way binding
'contenteditable' attribute is required for textContent, innerHTML and innerText two-way bindings
Attributes need to be unique
Attribute shorthand cannot be empty
Event attribute must be a JavaScript expression, not a string
'multiple' attribute must be static if select uses two-way binding
'%name%' is not a valid attribute name
Sequence expressions are not allowed as attribute/directive values in runes mode, unless wrapped in parentheses
'type' attribute must be a static text value if input uses two-way binding
Attribute values containing `{...}` must be enclosed in quote marks, unless the value only contains the expression
`bind:group` can only bind to an Identifier or MemberExpression
Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
`bind:%name%` is not a valid binding
`bind:%name%` is not a valid binding. %explanation%
`bind:%name%={get, set}` must not have surrounding parentheses
`bind:%name%` can only be used with %elements%
Can only bind to state or props
`$bindable()` can only be used inside a `$props()` declaration
%name% cannot appear more than once within a block
{:...} block is invalid at this position (did you forget to close the preceding element or block?)
'elseif' should be 'else if'
{#%name% ...} block cannot be %location%
Block was left open
Expected a `%character%` character immediately following the opening bracket
Unexpected block closing tag
This type of directive is not valid on components
Cyclical dependency detected: %cycle%
{@const ...} must consist of a single variable declaration
`{@const}` must be the immediate child of `{#snippet}`, `{#if}`, `{:else if}`, `{:else}`, `{#each}`, `{:then}`, `{:catch}`, `<svelte:fragment>`, `<svelte:boundary` or `<Component>`
Cannot assign to %thing%
Cannot bind to %thing%
Declaration cannot be empty
Expected a valid CSS identifier
A `:global` selector cannot follow a `%name%` combinator
A top-level `:global {...}` block can only contain rules, not declarations
A `:global` selector cannot be part of a selector list with more than one item
A `:global` selector cannot modify an existing selector
A `:global` selector can only be modified if it is a descendant of other selectors
`:global(...)` can be at the start or end of a selector sequence, but not in the middle
`:global(...)` must contain exactly one selector
`:global(...)` must not contain type or universal selectors when used in a compound selector
Nesting selectors can only be used inside a rule or as the first selector inside a lone `:global(...)`
Invalid selector
`:global(...)` must not be followed by a type selector
{@debug ...} arguments must be identifiers, not arbitrary expressions
`%name%` has already been declared
Cannot declare a variable with the same name as an import inside `<script module>`
Cannot export derived state from a module. To expose the current derived value, export a function returning its value
Directive value must be a JavaScript expression enclosed in curly braces
`%type%` name cannot be empty
The $ name is reserved, and cannot be used for variables and imports
The $ prefix is reserved, and cannot be used for variables and imports
Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`, or `bind:value={array[i]}` instead of `bind:value={entry}`)
In legacy mode, it was possible to reassign or bind to the each block argument itself:
<script>
let array = [1, 2, 3];
</script>
{#each array as entry}
<!-- reassignment -->
<button on:click={() => entry = 4}>change</button>
<!-- binding -->
<input bind:value={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:
<script>
let array = $state([1, 2, 3]);
</script>
{#each array as entry, i}
<!-- reassignment -->
<button onclick={() => array[i] = 4}>change</button>
<!-- binding -->
<input bind:value={array[i]}>
{/each}
`$effect()` can only be used as an expression statement
`</%name%>` attempted to close an element that was not open
`</%name%>` attempted to close element that was already automatically closed by `<%reason%>` (cannot nest `<%reason%>` inside `<%name%>`)
`<%name%>` was left open
Event modifiers other than 'once' can only be used on DOM elements
Valid event modifiers are %list%
The '%modifier1%' and '%modifier2%' modifiers cannot be used together
Expected attribute value
Expected 'if', 'each', 'await', 'key' or 'snippet'
Expected an identifier
Expected identifier or destructure pattern
Expected token %token%
Expected whitespace
Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless the `experimental.async` compiler option is `true`
`%name%` is not defined
`%name%` is an illegal variable name. To reference a global variable called `%name%`, use `globalThis.%name%`
`$host()` can only be used inside custom element component instances
`<%name%>` does not support non-event attributes or spread attributes
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(...)` cannot be used inside a generator function
`$inspect.trace(...)` must be the first statement of a function body
The arguments keyword cannot be used within the template or at the top level of a component
%message%
Cannot use `await` in deriveds and template expressions, or at the top level of a component, unless in runes mode
Cannot use `export let` in runes mode — use `$props()` instead
Cannot use `$$props` in runes mode
`$:` is not allowed in runes mode, use `$derived` or `$effect` instead
Cannot use `$$restProps` in runes mode
`let:` directive at invalid position
Mixing old (on:%name%) and new syntaxes for event handling is not allowed. Use only the on%name% syntax
A component cannot have a default export
%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:
<p>hello <div>world</div></p>
will result in<p>hello </p><div>world</div><p></p>
(the<div>
autoclosed the<p>
because<p>
cannot contain block-level elements)<option><div>option a</div></option>
will result in<option>option a</option>
(the<div>
is removed)<table><tr><td>cell</td></tr></table>
will result in<table><tbody><tr><td>cell</td></tr></tbody></table>
(a<tbody>
is auto-inserted)
Invalid compiler option: %details%
Invalid compiler option: %details%
Unrecognised compiler option %keypath%
Cannot use `$props()` more than once
Declaring or accessing a prop starting with `$$` is illegal (they are reserved for Svelte internals)
`$props()` can only be used with an object destructuring pattern
`$props()` assignment must not contain nested properties or computed keys
`$props()` can only be used at the top level of components as a variable declaration initializer
Cyclical dependency detected: %cycle%
Calling a snippet function using apply, bind or call is not allowed
`{@render ...}` tags can only contain call expressions
cannot use spread arguments in `{@render ...}` tags
`%rune%` cannot be called with arguments
`%rune%` must be called with %args%
Cannot access a computed property of a rune
`%name%` is not a valid rune
Cannot use `%rune%` rune in non-runes mode
Cannot use rune without parentheses
The `%name%` rune has been removed
`%name%` is now `%replacement%`
%name% cannot be used in runes mode
A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element
If the `%name%` attribute is supplied, it must be a boolean attribute
If the context attribute is supplied, its value must be "module"
The `%name%` attribute is reserved and cannot be used
Duplicate slot name '%name%' in <%component%>
slot attribute must be a static value
Element with a slot='...' attribute must be a child of a component or a descendant of a custom element
Found default slot content alongside an explicit slot="default"
`<slot>` can only receive attributes and (optionally) let directives
slot attribute must be a static value
`default` is a reserved word — it cannot be used as a slot name
Cannot use `<slot>` syntax and `{@render ...}` tags in the same component. Migrate towards `{@render ...}` tags completely
Cannot use explicit children snippet at the same time as implicit children content. Remove either the non-whitespace content or the children snippet block
An exported snippet can only reference things declared in a `<script module>`, or other exportable snippets
It's possible to export a snippet from a <script module>
block, but only if it doesn't reference anything defined inside a non-module-level <script>
. For example you can't do this...
<script module>
export { greeting };
</script>
<script>
let message = 'hello';
</script>
{#snippet greeting(name)}
<p>{message} {name}!</p>
{/snippet}
...because greeting
references message
, which is defined in the second <script>
.
Snippets do not support rest parameters; use an array instead
Cannot reassign or bind to snippet parameter
This snippet is shadowing the prop `%prop%` with the same name
Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties
`%rune%(...)` can only be used as a variable declaration initializer or a class field
Cannot subscribe to stores that are not declared at the top level of the component
Cannot reference store value inside `<script module>`
Cannot reference store value outside a `.svelte` file
Using a $
prefix to refer to the value of a store is only possible inside .svelte
files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
`style:` directive can only use the `important` modifier
A component can have a single top-level `<style>` element
`<svelte:body>` does not support non-event attributes or spread attributes
Valid attributes on `<svelte:boundary>` are `onerror` and `failed`
Attribute value must be a non-string expression
Invalid component definition — must be an `{expression}`
`<svelte:component>` must have a 'this' attribute
`<svelte:element>` must have a 'this' attribute with a value
`<svelte:fragment>` can only have a slot attribute and (optionally) a let: directive
`<svelte:fragment>` must be the direct child of a component
`<svelte:head>` cannot have attributes nor directives
A component can only have one `<%name%>` element
<%name%> cannot have children
`<%name%>` tags cannot be inside elements or blocks
Valid `<svelte:...>` tag names are %list%
"tag" option is deprecated — use "customElement" instead
`<svelte:options>` can only receive static attributes
Value must be %list%, if specified
"customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
"props" must be a statically analyzable object literal of the form "{ [key: string]: { attribute?: string; reflect?: boolean; type?: "String" | "Boolean" | "Number" | "Array" | "Object" }"
"shadow" must be either "open" or "none"
Tag name must be lowercase and hyphenated
See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
Tag name is reserved
See https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name for more information on valid tag names
`<svelte:options>` unknown attribute '%name%'
`<svelte:self>` components can only exist inside `{#if}` blocks, `{#each}` blocks, `{#snippet}` blocks or slots passed to components
Expected a valid element or component name. Components must have a valid variable name or dot notation expression
{@%name% ...} tag cannot be %location%
A `<textarea>` can have either a value attribute or (equivalently) child content, but not both
`<title>` cannot have attributes nor directives
`<title>` can only contain text and {tags}
Cannot use `%type%:` alongside existing `%existing%:` directive
Cannot use multiple `%type%:` directives on a single element
TypeScript language features like %feature% are not natively supported, and their use is generally discouraged. Outside of `<script>` tags, these features are not supported. For use within `<script>` tags, you will need to use a preprocessor to convert it to JavaScript before it gets passed to the Svelte compiler. If you are using `vitePreprocess`, make sure to specifically enable preprocessing script tags (`vitePreprocess({ script: true })`)
Unexpected end of input
'%word%' is a reserved word in JavaScript and cannot be used here
Unterminated string constant
Void elements cannot have children or closing tags