`<!>` is not valid XHTML regression in Svelte 5 #15799

reckart · 2025-04-18T15:40:54Z

Describe the bug

Svelte 4 could be used on XHTML documents. With Svelte 5, this seems to be no longer the case.

One issue is that <!> is used as a hydration marker in Svelte 5.

HTML fragments containing this marker can then be passed to create_fragment_from_html in reconciler.js:

export function create_fragment_from_html(html) {
	var elem = document.createElement('template');
	elem.innerHTML = html;
	return elem.content;
}

This then fails when trying to assign the HTML fragment to the element.innerHTML with the error message that the fragment is not valid XML.

The only workaround I found was post-processing the generated JS file and replacing instances of <!> with . With this replacement, the code seems to work. However, having to post-process the generated JS file using string operations is a really bad hack.

I believe Svelte code should not use <!> but rather  to be compatible with XHTML/XML environments in the same way that Svelte 4 was.

Reproduction

I don't think my report is vague.

Logs

System Info

System:
    OS: macOS 14.7.4
    CPU: (8) arm64 Apple M2
    Memory: 134.42 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.18.0/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
  Browsers:
    Chrome: 135.0.7049.96
  npmPackages:
    svelte: ^5.25.12 => 5.27.1

Severity

blocking an upgrade

The text was updated successfully, but these errors were encountered:

paoloricciuti · 2025-04-18T15:51:41Z

I think this could be fixed by #15538

reckart · 2025-04-18T16:04:26Z

@paoloricciuti looks like it might. I think that approach would also fix #15801.

Is there some way to test-drive #15538 without too much effort? Optimally, I would just have to replace a dependency line in package.json if possible?

paoloricciuti · 2025-04-18T16:09:28Z

Sure just do

pnpm add https://pkg.pr.new/svelte@15538

reckart · 2025-04-18T16:53:29Z

@paoloricciuti ok, tested. I switch to functional templating mode, checked the JS file to see if it actually is active:

          {
            e: "input",
            p: {
              class: "form-check-input svelte-yabzgr",
              type: "checkbox",
              role: "switch",
              id: "aggregatedLabelsEnabled"
            }
          },

Looks good - and now my components also load in XHTML.

Great work! How certain is it that this feature will be merged and approximately when?

paoloricciuti · 2025-04-18T17:02:17Z

Great work! How certain is it that this feature will be merged and approximately when?

Almost certain, it's a prerequisite to advance on the custom renderer API.

Rich-Harris · 2025-05-22T13:27:13Z

I don't think my report is vague.

You're mistaken. I was eventually able to figure out that in order to reproduce the issue you need to have something like this at the top of your document...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

...and the document needs to be served with Content-Type: application/xhtml+xml. But that's time that can't be spent working on other issues. The issue template says the following...

Please provide a link to a repo or REPL that can reproduce the problem you ran into

...and this is why. Please fill it out as requested next time!

reckart · 2025-05-22T13:40:56Z

I had to choice to open an issue or not do it because I have no idea how to create a REPL that would be able to reproduce this. I have an open-source repo that can reproduce it, but it is absolutely not minimal. Having opened the issue, @paoloricciuti immediately jumped in, provided a possible way out and I was able to quickly test that way and confirm for it to remove the problem.

It took me significant time to migrate from Svelte 3 to 4 and it's still not working as well as with the old version - because importing svelte files from other modules doesn't work anymore due to effects and because of the present issue here of course.

If I can with reasonable effort, I do fill out the template.
If I can easily test a fix, I will do it.
If I first have to learn a new technology, I'm afraid, I won't be able to do that.
But I'm happy to demo my problems to anybody willing to hop onto a call.

paoloricciuti · 2025-05-22T13:49:33Z

I had to choice to open an issue or not do it because I have no idea how to create a REPL that would be able to reproduce this

The issue is: you have you repo and can play with it to figure out a minimal reproduction. We don't. Does this means that we can't figured it out? As Rich demonstrated, no...but he had to spent way more time on this that you woudl've spent especially since you knew what the problem was. Creating a simple repo with the right headers and a failing svelte component would've been easy to create for you since you already knew how.

reckart · 2025-05-22T14:14:05Z

Creating a simple repo with the right headers and a failing svelte component would've been easy to create for you since you already knew how.

I'm afraid this is not the case. Isolating the behaviour of my application which uses a huge tool stack into a simple repo is not easy for me. I typically work on my projects for very long times (years) and do very seldomly have to set up projects from scratch. I understand your position. If somebody can provide me with a proper reproducer, I also very much prefer that. But for various reasons it is not always possible.

paoloricciuti · 2025-05-22T14:26:19Z

I'm afraid this is not the case. Isolating the behaviour of my application which uses a huge tool stack into a simple repo is not easy for me.

You already isolated the behaviour: the error happened when an XHTML document was using svelte...a repro would've been as simple as creating a proper project using XHTML + svelte and showing that it errors out. And tbf you should've done the same to verify that that was indeed the error. Imagine if Rich tried to replicate the issue for hours just to find out it was a completely different issue based on your setup?

Also, since your issue is not a duplicate is very likely that we could've left this unfixed and be fine with it since 99.9% of the user base is not affected. You've been lucky we were working on a solution already but without a reproduction this could've been just a stale issue in other cases.

reckart · 2025-05-22T14:42:25Z

You've been lucky we were working on a solution already but without a reproduction this could've been just a stale issue in other cases.

True, I've been lucky that you have been working on an issue already. I could also have been lucky that another (potentially non-dev) person could have chimed in with some experience that could have helped me further. I was considering whether to open a discussion post or a bug report. In this case, I felt the bug report was more appropriate, in particular because I could even provide a workaround.

As a OSS developer/maintainer, I tell my own users often enough that a reproducer is the best way to report bugs. But in many cases, people are not able to provide reproducers for various reasons - and I still try helping them. At times, I even hop on calls with them. And regularly, I can help people - even without reproducers. Even if it might sometimes be a shot in the dark or a lucky user hitting a problem I have already been working on or both.

❤️ So thank you very much for your support! I'm very happy the templating feature is making progress and look forward to upgrading to a Svelte version that offers it.

The currently most annoying problem after the Svelte upgrade that I have is the effect_orphan Error When Importing .svelte Files from Another Package in Svelte 5 with esbuild. Currently, I have resorted to simply copying the originally imported code into all the modules where I need it. Unless I have an epiphany or somebody knowledgable chimes in, that one might escalate to a level where I might invest the time to set up a reproducer in the coming weeks when it really starts bugging me.

Rich-Harris · 2025-05-22T15:21:51Z

FYI the next minor version will produce XHTML-compliant template fragments (and server-rendered HTML) in the first place (it replaces <!> with  and always uses /> for void elements), so you won't need to use the new config option — it should Just Work unless there are other violations we're not aware of

reckart · 2025-05-22T15:24:21Z

@Rich-Harris there is #15801 as well - that is the other reason for me to switch to the templating mode.

paoloricciuti · 2025-05-22T15:26:36Z

@Rich-Harris there is #15801 as well - that is the other reason for me to switch to the templating mode.

That is also covered

reckart mentioned this issue Apr 18, 2025

#5380 - Upgrade dependencies inception-project/inception#5391

Merged

31 tasks

This was referenced Apr 18, 2025

feat: functional template generation #15538

Merged

Resolve remaining Svelte transition issues inception-project/inception#5397

Open

paoloricciuti closed this as completed in #15538 May 22, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

`<!>` is not valid XHTML regression in Svelte 5 #15799

`<!>` is not valid XHTML regression in Svelte 5 #15799

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

<!> is not valid XHTML regression in Svelte 5 #15799

<!> is not valid XHTML regression in Svelte 5 #15799

Comments

Describe the bug

Reproduction

Logs

System Info

Severity

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

`<!>` is not valid XHTML regression in Svelte 5 #15799

`<!>` is not valid XHTML regression in Svelte 5 #15799