sveltejs/svelte

Dynamic component does nothing if you render it incorrectly

Closed this issue · 4 comments

Reproduction at https://github.com/TehShrike/svelte-ssr-dynamic-component-repro

Given these two components:

<!-- Parent.html -->
<h1>sup</h1>
<div>
	<:Component {Child} />
</div>
<!-- Child.html -->
<p>
	o hai
</p>

When rendered with this code:

Parent.render({
	data: {
		Child,
	},
})

I would expect to get this output:

<h1>sup</h1>
<div>
<p>
	o hai
</p>
</div>

But instead it renders this output:

<h1>sup</h1>
<div>
	
</div>

without logging an errors or warnings.

This is PEBKAC :) The API for server-rendering is Component.render(data), not ({ data }):

Parent.render({
  Child
});

I suppose the question here is what should happen when Svelte believes no component has been passed. At the moment it renders nothing (on both server and client); arguably it should at least print a warning in dev mode. Maybe it should even be an error?

One question before considering that warning/error I guess is whether there is some value in continuing to be able to pass null/etc. as a dynamic component and having it render nothing, without having to wrap it in an {{#if}}. Is that considered bad code, or at least code that ought to be made more explicit?

aah, I was afraid I'd made some mistake like that 😂

Warning would be nice. I would have actually expected an error while trying to use <:Component> to render an undefined component.

I think I'm going to close this — there are too many situations where you do want the this of a <svelte:component> to be null or undefined, and I haven't heard feedback from other people that it's a source of confusion