sveltejs / sveltejs/kit

Wrong relative path in `%sveltekit.assets%` with "malformed" url

Open
#14,782 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

paths.base
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

Sorry I don't know how to phrase this correctly. It happened that I had a wrong url that landed on a page where I got 404 (as it should), but %sveltekit.assets% resolves to a wrong relative path and breaks.

Reproduction

Run a sveltekit app with proper +error.svelte page and have something in the app.html referencing %sveltekit.assets%, for example:

<link rel="icon" href="%sveltekit.assets%/img/favicon.png" />

Then load a 404 url in this format:

http://example.com/somethingsomething/http://awrongurl

Inspect the generated HTML page and you get this:

<link rel="icon" href="../../img/favicon.png" />

which is wrong.

Logs

System Info
System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (12) x64 Intel(R) Xeon(R) Gold 5318Y CPU @ 2.10GHz
    Memory: 11.12 GB / 15.61 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 22.16.0 - /usr/bin/node
    npm: 11.5.2 - /usr/bin/npm
Severity

annoyance

Additional Information

I've solved it by changing kit.paths.relative to false in svelte.config.js but I still wanted to report it in case someone else stumbles upon this.

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 by reproducing the malformed URL with a SvelteKit app using a +error.svelte page and app.html referencing %sveltekit.assets%, then compare the generated relative path with the expected asset path. Check how kit.paths.relative in svelte.config.js affects this behavior; done means the favicon path remains correct for the reported 404 URL without requiring that setting to be disabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.