svelte
svelte copied to clipboard
Error when snippet is next to empty text expression
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