fix: bail-out of hydrating head if no anchor is found (#12541)

* fix: bail-out of hydrating head if no anchor is found

* add failing test

* fix

* fix comment

---------

Co-authored-by: Rich Harris <[email protected]>

.changeset/neat-boxes-chew.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: bail-out of hydrating head if no anchor is found

packages/svelte/src/internal/client/dom/blocks/svelte-head.js

@@ -1,5 +1,5 @@
 /** @import { TemplateNode } from '#client' */
-import { hydrate_node, hydrating, set_hydrate_node } from '../hydration.js';
+import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
 import { empty } from '../operations.js';
 import { block } from '../../reactivity/effects.js';
 import { HEAD_EFFECT } from '../../constants.js';
@@ -36,21 +36,30 @@ export function head(render_fn) {
 		}
 
 		while (
-			head_anchor.nodeType !== 8 ||
-			/** @type {Comment} */ (head_anchor).data !== HYDRATION_START
+			head_anchor !== null &&
+			(head_anchor.nodeType !== 8 || /** @type {Comment} */ (head_anchor).data !== HYDRATION_START)
 		) {
 			head_anchor = /** @type {TemplateNode} */ (head_anchor.nextSibling);
 		}
 
-		head_anchor = set_hydrate_node(/** @type {TemplateNode} */ (head_anchor.nextSibling));
-	} else {
+		// If we can't find an opening hydration marker, skip hydration (this can happen
+		// if a framework rendered body but not head content)
+		if (head_anchor === null) {
+			set_hydrating(false);
+		} else {
+			head_anchor = set_hydrate_node(/** @type {TemplateNode} */ (head_anchor.nextSibling));
+		}
+	}
+
+	if (!hydrating) {
 		anchor = document.head.appendChild(empty());
 	}
 
 	try {
 		block(() => render_fn(anchor), HEAD_EFFECT);
 	} finally {
 		if (was_hydrating) {
+			set_hydrating(true);
 			head_anchor = hydrate_node; // so that next head block starts from the correct node
 			set_hydrate_node(/** @type {TemplateNode} */ (previous_hydrate_node));
 		}

packages/svelte/tests/hydration/samples/head-missing/_config.js

@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test(assert, target, snapshot, component, window) {
+		assert.equal(window.document.querySelectorAll('meta').length, 2);
+	}
+});

packages/svelte/tests/hydration/samples/head-missing/_expected_head.html

@@ -0,0 +1 @@
+<meta name="description" content="some description"> <meta name="keywords" content="some keywords">

packages/svelte/tests/hydration/samples/head-missing/main.svelte

@@ -0,0 +1,6 @@
+<svelte:head>
+	<meta name="description" content="some description" />
+	<meta name="keywords" content="some keywords" />
+</svelte:head>
+
+<div>Just a dummy page.</div>

packages/svelte/tests/hydration/test.ts

@@ -53,13 +53,14 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 	});
 
 	const override = read(`${cwd}/_override.html`);
+	const override_head = read(`${cwd}/_override_head.html`);
 
 	fs.writeFileSync(`${cwd}/_output/body.html`, rendered.html + '\n');
 	target.innerHTML = override ?? rendered.html;
 
 	if (rendered.head) {
 		fs.writeFileSync(`${cwd}/_output/head.html`, rendered.head + '\n');
-		head.innerHTML = rendered.head;
+		head.innerHTML = override_head ?? rendered.head;
 	}
 
 	config.before_test?.();