🐛 BUG: Undefined behavior when I pass children to a component that has no <slot/>

[FredKSchott]

What package manager are you using?

npm

What operating system are you using?

mac

Describe the Bug

Given this component usage:

<WrapChildrenWithText>
  <img src="https://placehold.co/400" />
<WrapChildrenWithText>

I would expect this to warn or error if WrapChildrenWithText did not have a <slot> defined. Currently, I do not know what will happen other than we aren't providing warnings.

/cc @natemoo-re

Link to Minimal Reproducible Example (Optional)

No response

[matthewp]

Do other frameworks warn here?

When we've updated the VSCode extension to be more intelligent it might be able to tell you that there is no slot for this component.

[jasikpark]

Since the VSCode extension is just based on the LSP which is based on the compiler, maybe that's something we can detect in the compiler and then surface through that chain of communication?

[jasikpark]

Shouldn't this be a build-stopping error?

[matthewp]

We don't stop the build (or throw) for any other mistakes so I don't think we should do so here.

[jasikpark]

Ah, I assumed we did since I've run into errors that fail to build pages in dev mode, ok

[matthewp]

It depends on the type of error. Passing an unwanted slot doesn't cause any errors. For example, if you failed to pass a prop to a component the component could choose to throw. If an API existed for slots like in withastro/astro#1225 then a component could throw for slots being wrong.

Maybe what you're looking for is a type checker like svelte has with svelte-check. Such a tool could error on things like this.

[FredKSchott]

+1 for treating this like a TS error, similar to what happens when you use a bad prop. Even better if we can support type checking based on slot names, and warn if you use an incorrect slot name.