You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I was a little silly today and somehow mixed up @render and @html.
Easy fix, but unfortunately the error message is incredibly unhelpful:
TypeError: Cannot read properties of undefined (reading 'out')
at children (<snip>/src/routes/+page.svelte:13:4) [1]
at Component (<snip>\src\lib\Component.svelte:7:8) [2]
<snip>
The sourcemap's line numbers weren't particularly useful either, so I went digging in the generated _page.svelte.js.
After some fiddling I found that a component like this:
<scriptlang="ts">
importtype { Snippet } from'svelte';let { children }: { children:Snippet } =$props();
</script>
<!-- Bad -->
{@htmlchildren()}
<!-- Good -->
{@renderchildren()}
...compiles roughly to this:
functionComponent($$payload,$$props){push();let{ children }=$$props;// {@html children()}// Bad: children expects $$payload parameter$$payload.out+=`${html(children())}`;// [2]// {@render children()}// Good: children gets $$payload parameterchildren($$payload);$$payload.out+=`<!---->`;pop();}function_page($$payload){Component($$payload,{children: ($$payload2)=>{// Error: $$payload2 is undefined :($$payload2.out+=`<!---->Content`;// [1]}});}
I know next to nothing about Svelte's internals, but I suppose invoking a Snippet inside @render gets special treatment from the compiler to insert the hidden $$payload parameter. This doesn't happen in other situations, therefore it blows up at runtime.
You can only call a snippet through the {@render ...} tag.
That makes sense to me, but it doesn't seem to be enforced in any way, nor is it mentioned on the docs page. I don't see a way to encode this into the type system, so I'd suggest adding an explicit error message. Preferably at compile time if possible, but a helpful runtime error would already be a great improvement :)
Describe the bug
I was a little silly today and somehow mixed up
@render
and@html
.Easy fix, but unfortunately the error message is incredibly unhelpful:
The sourcemap's line numbers weren't particularly useful either, so I went digging in the generated
_page.svelte.js
.After some fiddling I found that a component like this:
...compiles roughly to this:
I know next to nothing about Svelte's internals, but I suppose invoking a
Snippet
inside@render
gets special treatment from the compiler to insert the hidden$$payload
parameter. This doesn't happen in other situations, therefore it blows up at runtime.The JSDoc for
Snippet
says:That makes sense to me, but it doesn't seem to be enforced in any way, nor is it mentioned on the docs page. I don't see a way to encode this into the type system, so I'd suggest adding an explicit error message. Preferably at compile time if possible, but a helpful runtime error would already be a great improvement :)
Reproduction
Here
System Info
Severity
annoyance
The text was updated successfully, but these errors were encountered: