Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte 5: missing inner content warning if children prop is forwarded #13504

Open
fehnomenal opened this issue Feb 26, 2025 · 3 comments
Open
Labels
bug Something isn't working help wanted PRs welcomed. The implementation details are unlikely to cause debate

Comments

@fehnomenal
Copy link
Contributor

Describe the bug

Like in #11127 the warning

src/routes/+layout.svelte
`<slot />` or `{@render ...}` tag missing — inner content will not be rendered

is printed even though my layout forwards the children prop to another component which displays it then.

Reproduction

See: https://stackblitz.com/edit/sveltejs-kit-template-default-u9oiqqaf

The +layout.svelte consists of only this:

<script>
	import Layout from './Layout.svelte';

	/** @type {{children: import('svelte').Snippet}} */
	let { children } = $props();
</script>

<Layout {children} />

Logs

System Info

Does not matter

Severity

annoyance

Additional Information

No response

@Conduitry
Copy link
Member

Using <Layout>{@render children()}</Layout> instead in your +layout.svelte would remove the error.

I'm not certain whether we'd want to change the warning here to simply check whether you're using the children prop anywhere. It'd be more complicated, for an unusual case (with a simple workaround), and would have the risk of false negatives, because we can't reasonably track what happens to the children prop after it leaves this component to see whether it ever ends up in a {@render}.

@elliott-with-the-longest-name-on-github
Copy link
Contributor

Hmm, I guess if we can tell the children prop is being passed into anything in a layout we should just bail on this analysis and trust you know what you're doing.

@elliott-with-the-longest-name-on-github
Copy link
Contributor

This is low-priority/annoyance-tier, so I'm not going to dedicate time to fixing it right now, but if someone wants to dig in and open a PR to make this rule more intelligent, I'd be happy to have it.

Basically, if children is passed into any component, we should silence this warning and trust the developer knows what they're doing. I can think of two ways this could happen:

  • children is explicitly passed into the component (as in the issue above)
  • children is part of {...props} passed into a component

@elliott-with-the-longest-name-on-github elliott-with-the-longest-name-on-github added bug Something isn't working help wanted PRs welcomed. The implementation details are unlikely to cause debate labels Mar 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted PRs welcomed. The implementation details are unlikely to cause debate
Projects
None yet
Development

No branches or pull requests

3 participants