Spreading props on an anchor tag, `base` becomes "." on the browser

[boyeln]

Describe the bug

When spreading any object on an anchor tag that uses base (from $app/paths) as part of the URL, base becomes "." in the browser after hydration.

So with something like this:

<script>
  import { base } from "$app/paths";
  const someObject = {};
</script>

<a href="{base}/some/path" {...someObject}>Inspect me</a>

The href of the anchor tag will be "./some/page". However, by just removing {...someObject} from the anchor tag, it works as expected.

Reproduction

https://github.com/boyeln/sveltekit-base-link-issue-repro (just inspect the links, or click twice on the broken link to trigger a 404).

Logs

System Info

System:
  OS: macOS 15.1
  CPU: (8) arm64 Apple M1 Pro
  Memory: 151.27 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
  Yarn: 1.22.21 - ~/.nvm/versions/node/v20.11.0/bin/yarn
  npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
  pnpm: 9.11.0 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
  bun: 1.1.6 - ~/.bun/bin/bun
Browsers:
  Chrome: 132.0.6834.160
  Safari: 18.1
npmPackages:
  @sveltejs/adapter-auto: ^4.0.0 => 4.0.0 
  @sveltejs/kit: ^2.16.0 => 2.17.1 
  @sveltejs/vite-plugin-svelte: ^5.0.0 => 5.0.3 
  svelte: ^5.0.0 => 5.19.7 
  vite: ^6.0.0 => 6.0.11

Severity

serious, but I can work around it

Additional Information

No response

[elliott-with-the-longest-name-on-github]

This seems suspiciously related to sveltejs/svelte#15120

[boyeln]

It seems to be the same underlying problem, yes. After looking at sveltejs/svelte#13032 and sveltejs/svelte#9662 it seems to me that somehow spreading the $props breaks the special case for link/href hydration.

[boyeln]

Actually, it does not seem to have anything to do with $props (which I suppose makes sense). You only need to spread anything on an anchor tag to reproduce the behavior:

<script>
  import { base } from "$app/paths";

  const someObject = {};
</script>

<a href="{base}/some/path" {...someObject}>Inspect me</a>

If you inspect that anchor tag, you'll see that the href stays "./some/path" after hydration.

I'll update the issue to reflect this.

[boyeln]

I guess this doesn't have anything to do with sveltekit, so closing in favor of sveltejs/svelte#15120