False-positive `Placing %sveltekit.body% directly inside <body> is not recommended` warning
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the bug
I get this warning in my browser console:
But my app.html looks like this:
And when i check the DOM there is only one <body> element in the markup as expected.
Reproduction
I created a minimal repro for triggering this warning with something that should not trigger this warning: https://github.com/MathiasWP/sveltekit-false-positive-body-inside-body-warning
Code:
// +page.svelte
<script lang="ts">
import Button from './Button.svelte';
</script>
<Button>
<div>
<button>Hello world</button>
</div>
</Button>
// Button.svelte
<script lang="ts">
import type { Snippet } from 'svelte';
interface Props {
// Can be any type of named snippet, just used children for convenience
children: Snippet;
}
const { children }: Props = $props();
</script>
<button>{@render children()}</button>
Logs
(index):24 Placing %sveltekit.body% directly inside <body> is not recommended, as your app may break for users who have certain browser extensions installed.
Consider wrapping it in an element:
<div style="display: contents">
%sveltekit.body%
</div>
(anonymous) @ (index):24
Promise.then
(anonymous) @ (index):23
System Info
System:
OS: macOS 15.6.1
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Memory: 99.08 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.14.0 - /usr/local/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 10.9.2 - /usr/local/bin/npm
pnpm: 10.13.1 - ~/Library/pnpm/pnpm
bun: 1.2.17 - ~/.bun/bin/bun
Browsers:
Brave Browser: 138.1.80.113
Chrome: 139.0.7258.155
Safari: 18.6
npmPackages:
@sveltejs/adapter-auto: ^6.0.0 => 6.1.0
@sveltejs/kit: ^2.22.0 => 2.37.0
@sveltejs/vite-plugin-svelte: ^6.0.0 => 6.1.3
svelte: ^5.0.0 => 5.38.6
vite: ^7.0.4 => 7.1.3
Severity
annoyance
Additional Information
Kinda confusing warning, ended up spending a lot of time scratching my head not finding anything that should have caused this
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Run the linked minimal reproduction and compare its app.html with the +page.svelte and Button.svelte examples in the report. Trace why valid nested component content produces the body-placement warning, then verify that the warning is absent for this case without suppressing genuine warnings.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100