Invalid html in {@html} results in 500 error in SvelteKit 3
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 ran into an issue with {@html} in SvelteKit 3, that didn't happen using SvelteKit 2.
I noticed that trying to render invalid html via {@html} results in a 500 server error.
Two examples I found:
<p>Html without closing tag<p>Valid html</p>but rendered inside anothter<p>.
The logs don't generate any errors, which made it hard to debug.
I've created a repo and deployed it to Vercel here.
Reproduction
Repository: https://github.com/hankolsen/sveltekit3-html-issue
Running in Vercel: https://sveltekit3-html-issue.vercel.app/
When the page is server side rendered it results in a 500 error for at least the two examples available. Client side navigation works, so either load the page directly or reload it do force server side rendering.
Logs
System Info
System:
OS: macOS 15.7.7
CPU: (12) arm64 Apple M2 Max
Memory: 89.27 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 24.15.0 - /Users/hank/.nvm/versions/node/v24.15.0/bin/node
npm: 11.12.1 - /Users/hank/.nvm/versions/node/v24.15.0/bin/npm
pnpm: 12.3.4 - /Users/hank/Library/pnpm/bin/pnpm
bun: 1.4.0 - /opt/homebrew/bin/bun
Deno: 2.9.6 - /opt/homebrew/bin/deno
Browsers:
Brave Browser: 153.1.95.101
Chrome: 153.0.8010.50
Firefox: 155.0
Safari: 26.6.1
npmPackages:
@sveltejs/adapter-auto: ^8.0.0-next.3 => 8.0.0-next.4
@sveltejs/adapter-vercel: ^7.0.0-next.9 => 7.0.0-next.9
@sveltejs/kit: ^3.0.0-next.0 => 3.0.0-next.27
@sveltejs/vite-plugin-svelte: ^7.2.0 => 7.3.0
svelte: ^5.56.7 => 5.57.0
vite: ^8.1.5 => 8.3.0
Severity
blocking an upgrade
Additional Information
I noticed the issue when I pulled in content from a CMS that I don't control.
So, this is a blocking an upgrade to SvelteKit 3 at the moment.
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
Start with the linked reproduction repository and run it with direct page loads or reloads to exercise server-side rendering of the two {@html} examples. Compare that path with client-side navigation and trace where invalid or nested paragraph markup produces the 500 response. Done means both examples render or fail gracefully during SSR without an unreported 500, while client-side navigation continues to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- backend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100