trailingSlash: "always" changes external URLs

[Renkas]

Describe the bug

When using configuration: trailingSlash: "always" then external URLs will also get a trailing slash.

There is a workaround if you set some kind of taget to the anchor element. For example target="_self" but it's still a bug that shoud be fixed.

Reproduction

You can see repro: https://sveltejs-kit-template-default-tq3lbk--3000.local.webcontainer.io/

"Click me" should link to the URL: https://example.com/foo.php?bar=baz&more=params
But it actually navigates to: https://example.com/foo.php/?bar=baz&more=params

Notice the extra slash before the question mark.

You can see source of this example: https://stackblitz.com/edit/sveltejs-kit-template-default-tq3lbk?file=src/lib/header/Header.svelte

Logs

No response

System Info

not applicable

Severity

annoyance

Additional Information

No response

[babichjacob]

A workaround right now is adding rel="external" to the a tag to mark the link as external.

(To other maintainers: I hope I got the labels right.)

[zmre]

I'm seeing similar problems, but it is even worse. I have a statically generated site and the HTML has the links right (no trailing slash), but on click, something adds the slash before navigating. This happens for external links, but also to internal links to static assets like PDFs. So <a href="/pdfs/xyz.pdf">Download PDF</a> is generated correctly, but if someone clicks it, they get a 404. The rel="external" trick doesn't make sense for the static asset use case. Finding and modifying all of the links to add extra attributes isn't ideal, so I'm hoping someone picks this up. The broken links on our site are not a good look.

[zmre]

Update: the target="_self" trick does not seem to work for me as a workaround -- at least not when the link is to a local asset. The problem also happens when referencing things like images.

[PatrickG]

[...] The rel="external" trick doesn't make sense for the static asset use case.

You can use rel="external", the download attribute or the sveltekit:reload, see

kit/packages/kit/src/runtime/client/client.js

Line 1158 in 373ff63

if (

I think, in your case I would use the download attribute.

---

Edit: rel="external" makes sense as well.
From http://microformats.org/wiki/rel-external

The external keyword indicates that the link is leading to a document that is not part of the site that the current document forms a part of.

---

Update: the target="_self" trick does not seem to work for me as a workaround -- at least not when the link is to a local asset. The problem also happens when referencing things like images.

target="whatever" should work as well.

kit/packages/kit/src/runtime/client/client.js

Line 1167 in 373ff63

if (is_svg_a_element ? a.target.baseVal : a.target) return;

[zmre]

Nice, the sveltekit-reload option looks like the "right" way to bypass the javascript navigation when that's needed and that will workaround. Appreciate the code reference.

The function that adds the slash is here:

kit/packages/kit/src/utils/url.js

Line 49 in 373ff63

} else if (trailing_slash === 'always' && !path.endsWith('/')) {

Seems like it could detect non-relative links easy enough, but unfortunately, I'm not sure how that function (or the navigate function that calls it) might be able to discern static assets from routes before adding the slash. For now I guess I'll go annotate all the links I can find that are broken, but hopefully someone with more experience in Svelte Kit can craft a fix.