Compiler errors

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

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

Cannot `bind:group` to a snippet parameter

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?)

{#%name% ...} block cannot be %location%

Expected a `%character%` character immediately following the opening bracket

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>`

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 entries that don't contain `:global`

:global, x {
	y {
		color: red;
	}
}

:global {
	y {
		color: red;
	}
}

x y {
	color: red;
}

A `:global` selector cannot modify an existing selector

A `:global` selector can only be modified if it is a descendant of other selectors

A `:global` selector cannot be inside a pseudoclass

`: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(...)`

`: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}`)

<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}

<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%>`)

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 'if', 'each', 'await', 'key' or 'snippet'

Expected identifier or destructure pattern

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 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

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.

Invalid compiler option: %details%

Invalid compiler option: %details%

Unrecognised compiler option %keypath%

Cannot use `%rune%()` more than once

`$props.id()` can only be used at the top level of components as a variable declaration initializer

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

`%rune%` cannot be called with a spread argument

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

<script module>
	export { greeting };
</script>

<script>
	let message = 'hello';
</script>

{#snippet greeting(name)}
	<p>{message} {name}!</p>
{/snippet}

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

`%name%` has already been declared on this class

class class CounterCounter {
	Counter.count: numbercount = 
function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);
}

class class CounterCounter {
	constructor() {
		this.Counter.count: anycount = 
function $state<0>(initial: 0): 0 (+1 overload)
namespace $state
Declares reactive state.
Example:
let count = $state(0);
https://svelte.dev/docs/svelte/$state
@paraminitial The initial value$state(0);
	}
}

Cannot assign to a state field before its declaration

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, a class field declaration, or the first assignment to a class field at the top level of the constructor.

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

`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

`<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 })`)

'%word%' is a reserved word in JavaScript and cannot be used here

Void elements cannot have children or closing tags