svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Error when snippet is next to empty text expression

Open cloudymeatball opened this issue 4 months ago • 0 comments

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

cloudymeatball avatar Oct 23 '24 22:10 cloudymeatball