TypeError: next_sibling is null during hydration

[jrmajor]

Describe the bug

When certain component is SSR-ed, I get a type error during hydration (see logs section). Minimal reproduction I could make looks like this:

<script>
	let { name, remaining } = $props();
</script>

<span>
	<span>{name}</span>{remaining >= 2 ? ',' : ''}
</span>

The problem is caused by spacing between </span> and {. When I make the following change, the error no longer occurs:

- <span>{name}</span>{remaining >= 2 ? ',' : ''}
+ <span>{name}</span> {remaining >= 2 ? ',' : ''}

This crash causes Svelte to remove everything from DOM. Page that was server rendered not only isn't hydrated, but just goes blank.

Reproduction

Failing test: https://github.com/jrmajor/svelte/tree/c659c94d16a7306848935ff4ed11a4b4bb091873/packages/svelte/tests/hydration/samples/strange-spacing
Commit with tests to cherry pick: jrmajor@c659c94

Logs

Uncaught (in promise) TypeError: can't access property "nodeType", next_sibling is null

  in MainCredits.svelte
  in Show.svelte
  in Render.svelte
  in Layout.svelte
  in Render.svelte
  in App.svelte
    sibling operations.js:166
    ArtistName ArtistName.svelte:74
    effect2 hmr.js:47
    update_reaction runtime.js:318
    update_effect runtime.js:444
    create_effect effects.js:125
    branch effects.js:346
    wrapper hmr.js:38
    update_reaction runtime.js:318
    update_effect runtime.js:444

System Info

System:
  OS: macOS 15.0
  CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Memory: 514.17 MB / 16.00 GB
  Shell: 3.7.1 - /usr/local/bin/fish
Binaries:
  Node: 23.1.0 - /usr/local/bin/node
  Yarn: 1.22.22 - /usr/local/bin/yarn
  npm: 10.9.0 - /usr/local/bin/npm
  pnpm: 9.12.3 - /usr/local/bin/pnpm
  bun: 1.1.34 - /usr/local/bin/bun
Browsers:
  Safari: 18.0
npmPackages:
  svelte: ^5.2 => 5.2.0

Severity

blocking all usage of svelte

[jrmajor]

Thank you for fixing that, @trueadm. Can something be done to prevent similar errors from nuking the entire page in the future? One of the benefits from SSR is that even if JS fails, the HTML can still be displayed correctly. That error caused the entire DOM to be destroyed, leaving user with a blank page, even though the HTML was SSR-ed.

[kewp]

I'm getting a similar error on my app ... not sure how to debug it?

Uncaught (in promise) TypeError: Unhandled Promise Rejection: node is null
    remove_nodes hydration.js:90
    update_branch if.js:60
    if_block if.js:104
    update_reaction runtime.js:424
    update_effect runtime.js:578
    create_effect effects.js:125
    block effects.js:361

Using svelte 5.20.2

[trueadm]

I'm getting a similar error on my app ... not sure how to debug it?

Uncaught (in promise) TypeError: Unhandled Promise Rejection: node is null
    remove_nodes hydration.js:90
    update_branch if.js:60
    if_block if.js:104
    update_reaction runtime.js:424
    update_effect runtime.js:578
    create_effect effects.js:125
    block effects.js:361

Using svelte 5.20.2

Can you create a new issue, and maybe provide a repro or link to your code? A stack trace doesn't really help here.

[kewp]

I can't figure out what caused it, so don't know how to make a minimal example...

However turning on preserve whitespace fixed it:

compilerOptions: {
		preserveWhitespace: true
	},

[kewp]

I'm now getting another error, presumably from an empty if block? It seems to be the same thing - the node is null error comes back when I turn preserve whitespace back off.

if.js:65 Uncaught (in promise) TypeError: Unhandled Promise Rejection: Cannot read properties of undefined (reading 'substring')
    at root.svelte:45:20
    at Root (root.svelte:56:35)

and I can't figure out which part of my code is causing it! any help in just doing that would be greatly appreciated!

it comes inside of root.svelte

if (root_index === 0) {
	const data = /** @type {Comment} */ (anchor).data;
	if (data === HYDRATION_START) {
		hydrate_index = 0;
	} else if (data === HYDRATION_START_ELSE) {
		hydrate_index = Infinity;
	} else {
		hydrate_index = parseInt(data.substring(1));
		if (hydrate_index !== hydrate_index) {
			// if hydrate_index is NaN
			// we set an invalid index to force mismatch
			hydrate_index = condition ? Infinity : -1;
		}
	}
}

I'm guessing some part of my code is breaking hydration ... even just knowing which file it's happening in would help.

[kewp]

found the issue. I have an adapter that's outputting this code:

kit.start(app, element, {
	node_ids: [0, 2],
	data: [null,{"type":"data","data":{user:{email:"embedded"},errorMessage:null,stage:"embedded"},"uses":{}}],
	form: null,
	error: null
});