Skip to content

Error when snippet is next to empty text expression #13852

@cloudymeatball

Description

@cloudymeatball

Describe the bug

Suppose we have a Test.svelte component

<script>
    let {prop = '', children} = $props()
</script>
<div class=outline>{prop}{@render children?.()}</div>

and the fallback value of empty string is used for prop, then somewhere in hmr (which I am not too familiar with) results in

let prop = $.prop($$props, "prop", 3, '');
var div = root();
var text = $.child(div);
var node = $.sibling(text); // <--- problematic

In definition of.sibling

export function sibling(node, count = 1, is_text = false) {
	let next_sibling = hydrating ? hydrate_node : node;

	while (count--) {
		next_sibling = /** @type {TemplateNode} */ (get_next_sibling(next_sibling));
	}

	if (!hydrating) {
		return next_sibling;
	}

	var type = next_sibling.nodeType; // throws Uncaught (in promise) TypeError: next_sibling is null

The thrown TypeErrors renders page blank.

Error disappears when prop is initialized to a non-empty string. Error persists if keeping the empty string fall back value of prop, but reverting <div class=outline>{@render children?.()}{prop}</div>

Reproduction

In a new SvelteKit 2 skeleton project

<!-- routes/+page.svelte -->
<script>
  import Test from './Test.svelte'
</script>

<Test></Test>
<!-- routes/Test.svelte-->
<script>
    let {prop = '', children} = $props()
</script>

<div class=outline>{prop}{@render children?.()}</div>

<style>
    .outline{
        min-width: 100px;
        min-height: 100px;
        outline: 1px solid blue;
    }
</style>

Logs

Uncaught (in promise) TypeError: next_sibling is null

  in +page.svelte
  in layout.svelte
  in root.svelte
    sibling operations.js:158
    Test Test.svelte:18
    effect2 hmr.js:47
    update_reaction runtime.js:317
    update_effect runtime.js:443
    create_effect effects.js:124
    branch effects.js:343
    wrapper hmr.js:38
    update_reaction runtime.js:317
    update_effect runtime.js:443

System Info

works fine when js is disabled
In Chrome 130.0.6723.70, blank page, throws `Uncaught (in promise) TypeError: Cannot read properties of null (reading 'nodeType')`

In Firefox 131.0.3, flashes the component, then throws `Uncaught (in promise) TypeError: next_sibling is null`

svelte 5 playground does not exhibit any error

using: svelte 5.1.0, kit 2.7.2, vite 5.4.10

Severity

annoyance

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions