fix: prevent nullish snippet for rendering empty content

.changeset/tame-frogs-shave.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent nullish snippet for rendering empty content

packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js

@@ -30,6 +30,11 @@ export function RenderTag(node, context) {
 	let snippet_function = /** @type {Expression} */ (context.visit(callee));
 
 	if (node.metadata.dynamic) {
+		// If we have a chain expression then ensure a nullish snippet function gets turned into an empty one
+		if (node.expression.type === 'ChainExpression') {
+			snippet_function = b.logical('??', snippet_function, b.id('$.empty_snippet'));
+		}
+
 		context.state.init.push(
 			b.stmt(b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args))
 		);

packages/svelte/src/internal/client/dom/blocks/snippet.js

@@ -25,7 +25,7 @@ export function snippet(node, get_snippet, ...args) {
 	var anchor = node;
 
 	/** @type {SnippetFn | null | undefined} */
-	var snippet;
+	var snippet = /** @type {SnippetFn} */ (empty_snippet);
 
 	/** @type {Effect | null} */
 	var snippet_effect;
@@ -38,16 +38,18 @@ export function snippet(node, get_snippet, ...args) {
 			snippet_effect = null;
 		}
 
-		if (snippet) {
-			snippet_effect = branch(() => /** @type {SnippetFn} */ (snippet)(anchor, ...args));
-		}
+		snippet_effect = branch(() => /** @type {SnippetFn} */ (snippet)(anchor, ...args));
 	}, EFFECT_TRANSPARENT);
 
 	if (hydrating) {
 		anchor = hydrate_node;
 	}
 }
 
+// Just an empty function
+/** @type {(...args: any[]) => void} */
+export const empty_snippet = () => {};
+
 /**
  * In development, wrap the snippet function so that it passes validation, and so that the
  * correct component context is set for ownership checks

packages/svelte/src/internal/client/index.js

@@ -18,7 +18,7 @@ export { css_props } from './dom/blocks/css-props.js';
 export { index, each } from './dom/blocks/each.js';
 export { html } from './dom/blocks/html.js';
 export { sanitize_slots, slot } from './dom/blocks/slot.js';
-export { snippet, wrap_snippet } from './dom/blocks/snippet.js';
+export { snippet, wrap_snippet, empty_snippet } from './dom/blocks/snippet.js';
 export { component } from './dom/blocks/svelte-component.js';
 export { element } from './dom/blocks/svelte-element.js';
 export { head } from './dom/blocks/svelte-head.js';

packages/svelte/tests/runtime-runes/samples/snippet-undefined/_config.js

@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		assert.throws(() => {
+			btn?.click();
+			flushSync();
+		}, /snippet is not a function/);
+	}
+});

packages/svelte/tests/runtime-runes/samples/snippet-undefined/main.svelte

@@ -0,0 +1,13 @@
+<script>
+  let state = $state({
+		value: counter
+	});
+</script>
+
+{#snippet counter()}
+  Test
+{/snippet}
+
+{@render state.value()}
+
+<button onclick={() => state.value = undefined}>change</button>