sveltejs/svelte · error · Error

svelte_element_invalid_this_value

svelte_element_invalid_this_value

Error message

svelte_element_invalid_this_value
The `this` prop on `<svelte:element>` must be a string, if defined
https://svelte.dev/e/svelte_element_invalid_this_value

What it means

`<svelte:element this={...}>` dynamically renders an HTML element; the `this` prop must be a tag-name string (e.g. `'div'`, `'span'`) when defined. If `this` is a non-string (number, object, function) and not `null`/`undefined`, Svelte throws. `null`/`undefined` means 'render nothing', which is allowed.

Source

Thrown at packages/svelte/src/internal/shared/errors.js:149

		throw error;
	} else {
		throw new Error(`https://svelte.dev/e/store_invalid_shape`);
	}
}

/**
 * The `this` prop on `<svelte:element>` must be a string, if defined
 * @returns {never}
 */
export function svelte_element_invalid_this_value() {
	if (DEV) {
		const error = new Error(`svelte_element_invalid_this_value\nThe \`this\` prop on \`<svelte:element>\` must be a string, if defined\nhttps://svelte.dev/e/svelte_element_invalid_this_value`);

		error.name = 'Svelte error';

		throw error;
	} else {
		throw new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);
	}
}

View on GitHub (pinned to 20b341f100)

Solutions

1. Ensure `this` is a string tag name or `null`/`undefined`.
2. Coerce or validate: `this={typeof tag === 'string' ? tag : null}`.
3. If you meant to render a component, use dynamic component syntax (Svelte 5) instead of `svelte:element`.

Example fix

<!-- before -->
<svelte:element this={tag}>...</svelte:element> <!-- tag is a number/object -->
<!-- after -->
<svelte:element this={typeof tag === 'string' ? tag : null}>...</svelte:element>

if (tag != null && typeof tag !== 'string') {
	throw new Error('svelte:element this must be a string tag name or null');
}

function isValidThisTag(v) {
	return v == null || typeof v === 'string';
}

When it happens

Trigger: Binding `this` to a non-string value — a component reference, a number, or an object; computing `this` from unvalidated user/API input without coercing to a string.

Common situations: Dynamic tag rendering where the tag variable is mis-typed; passing a component constructor instead of a tag name; data-driven UI where the tag comes from unvalidated input.

Related errors

• derived() expects stores as input, got a falsy value

AI-assisted analysis of sveltejs/svelte@20b341f100 (2026-08-12). Data as JSON: /api/errors/e8ee4f61dce9607e. Report an issue: GitHub.