sveltejs / sveltejs/kit

Invalid html in {@html} results in 500 error in SvelteKit 3

Open
#17,151 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

svelte 5
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:

  1. <p>Html without closing tag
  2. <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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.