sveltejs/svelte · error · Error

invalid_snippet

invalid_snippet

Error message

invalid_snippet
Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
https://svelte.dev/e/invalid_snippet

What it means

Thrown at dom/blocks/snippet.js:34 in DEV when a {@render snippet()} expression evaluates to null or undefined. Svelte 5 snippets are functions; rendering a non-existent snippet is a programming error. The fix the error itself suggests is optional chaining {@render snippet?.()} when the snippet may be absent.

Source

Thrown at packages/svelte/src/internal/client/errors.js:360

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

/**
 * Could not `{@render}` snippet due to the expression being `null` or `undefined`. Consider using optional chaining `{@render snippet?.()}`
 * @returns {never}
 */
export function invalid_snippet() {
	if (DEV) {
		const error = new Error(`invalid_snippet\nCould not \`{@render}\` snippet due to the expression being \`null\` or \`undefined\`. Consider using optional chaining \`{@render snippet?.()}\`\nhttps://svelte.dev/e/invalid_snippet`);

		error.name = 'Svelte error';

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

/**
 * `%name%(...)` cannot be used in runes mode
 * @param {string} name
 * @returns {never}
 */
export function lifecycle_legacy_only(name) {
	if (DEV) {
		const error = new Error(`lifecycle_legacy_only\n\`${name}(...)\` cannot be used in runes mode\nhttps://svelte.dev/e/lifecycle_legacy_only`);

		error.name = 'Svelte error';

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

View on GitHub (pinned to 20b341f100)

Solutions

1. Use optional chaining: {@render snippet?.()} when the snippet may legitimately be absent.
2. Provide a default snippet when destructuring props: `const { snippet = () => {} } = $props()`.
3. Ensure the caller always passes the snippet, or make rendering conditional on its presence.

Example fix

// before
const { header } = $props();
{@render header()}

// after — optional chaining
const { header } = $props();
{@render header?.()}

// Use optional chaining in {@render} expressions to guard against null/undefined snippets.
// In JS, a snippet is a function or null/undefined:
/** @param {Function|null|undefined} snippet */
function isSnippet(v) { return typeof v === 'function'; }

When it happens

Trigger: A parent passes no value for a snippet prop the child renders unconditionally; a conditional snippet that is sometimes undefined; destructuring a snippet prop that wasn't provided. The guard at snippet.js:33-35 fires when get_snippet() returns null/undefined.

Common situations: A component declares `{@render children()}` but is used with no children; optional snippet props not marked optional; refactoring slots to snippets and forgetting a default; passing a snippet conditionally and rendering it unconditionally.

Related errors

• svelte_boundary_reset_onerror
• effect_in_unowned_derived
• effect_orphan
• effect_pending_outside_reaction
• effect_update_depth_exceeded

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