sveltejs/kit · warning

\u001B[1m\u001B[31mRemoving comments in transformPageChunk c

Error message

\u001B[1m\u001B[31mRemoving comments in transformPageChunk can break Svelte's hydration\u001B[39m\u001B[22m

What it means

In dev, after running the user's transformPageChunk hook, SvelteKit counts non-SSI HTML comments in the output. If comments were removed (e.g. a minifier or regex stripping <!-- -->), Svelte's hydration markers (which are HTML comments) are gone and client hydration will break, so it prints a bold red console warning. It applies only when csr is enabled, since hydration only happens then.

Source

Thrown at packages/kit/src/runtime/server/page/render.js:642

	});

	// TODO flush chunks as early as we can
	const transformed =
		(await resolve_opts.transformPageChunk({
			html,
			done: true
		})) || '';

	if (!chunks) {
		headers.set('etag', `"${hash(transformed)}"`);
	}

	if (DEV) {
		if (page_config.csr) {
			if (count_non_ssi_comments(transformed) < count_non_ssi_comments(html)) {
				// the \u001B stuff is ANSI codes, so that we don't need to add a library to the runtime
				// https://svelte.dev/playground/1b3f49696f0c44c881c34587f2537aa2?version=4.2.19
				console.warn(
					"\u001B[1m\u001B[31mRemoving comments in transformPageChunk can break Svelte's hydration\u001B[39m\u001B[22m"
				);
			}
		} else {
			if (chunks) {
				console.warn(
					'\u001B[1m\u001B[31mReturning promises from server `load` functions will only work if `csr === true`\u001B[39m\u001B[22m'
				);
			}
		}
	}

	return chunks
		? new Response(stream_text(transformed + '\n', chunks), { status, headers })
		: text(transformed, { status, headers });
}

class Head {

View on GitHub (pinned to 03f1687fe6)

Solutions

  1. Remove any comment-stripping logic from transformPageChunk, at least when DEV is true
  2. Only strip comments that are not Svelte hydration markers, or use an SSR-aware minifier that preserves them
  3. Disable the minification when csr is true (keep it only for csr === false builds where nothing hydrates)

Example fix

// before
transformPageChunk: ({ html }) => html.replace(/<!--[\s\S]*?-->/g, '');

// after
transformPageChunk: ({ html, done }) => {
  if (done) return html; // preserve Svelte hydration comments
  return html;
};
Defensive patterns

Strategy: validation

Validate before calling

const before = countComments(html);
const after = countComments(transform(html));
if (after < before) console.warn('transformPageChunk removed comments; hydration may break');

Prevention

When it happens

Trigger: A transformPageChunk hook in svelte.config.js that strips HTML comments (e.g. html.replace(/<!--.*?-->/gs, '') or an HTML minifier) while csr === true and the app runs in DEV mode; the warning fires when the transformed chunk has fewer non-SSI comments than the original.

Common situations: Adding an HTML minifier/optimizer to transformPageChunk to shrink payload size; regex-based cleanup of the SSR output; copying minification snippets from production guides into a dev server config.

Related errors


AI-assisted analysis of sveltejs/kit@03f1687fe6 (2026-09-02). Data as JSON: /api/errors/c04130c4ae225fed. Report an issue: GitHub.