Clicking anchor links to valid static files results in a 404 and $error component showing

Describe the bug I noticed this when updating from @sveltejs/kit from next-84 to next-94. If you have an <a href="/some-static-file.png"> link to any static asset, when you click the link, the SPA renders the $error layout with a 404 Not Found.

Logs There’s nothing in the console, but the stack on the $error page has the following:

_get_navigation_result@http://localhost:3000/.svelte/dev/runtime/internal/start.js:625:11
update@http://localhost:3000/.svelte/dev/runtime/internal/start.js:508:38
_navigate@http://localhost:3000/.svelte/dev/runtime/internal/start.js:233:23
init/<@http://localhost:3000/.svelte/dev/runtime/internal/start.js:143:9
EventListener.handleEvent*init@http://localhost:3000/.svelte/dev/runtime/internal/start.js:100:19
start@http://localhost:3000/.svelte/dev/runtime/internal/start.js:1004:20
async*@http://localhost:3000/:222:9

To Reproduce

I have a quick public repo with a minimal change to the sample project here if you want to pull that down: https://github.com/leereamsnyder/sveltekit-static-file-link-busted/blob/768fe93c2974ece2538be30a3d75c2af6cccd29b/src/routes/index.svelte#L29-L32

1. Follow the Getting Started guide to create a sample project. I accepted all defaults.
2. Start up with npm run dev
3. In a route component, add an anchor link to an existing static file. In the starter project index page, for example, I added <a href="svelte-welcome.png">link to an image</a>
4. Click the resulting link in the browser. You’ll see an error page. If you reload at that point, you’ll get the actual file, so the static server appears to be working generally.

Expected behavior

The browser should render the static file instead of the SPA rendering an $error page.

Stacktraces If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread’s readability:

Stack trace from the $error component

_get_navigation_result@http://localhost:3000/.svelte/dev/runtime/internal/start.js:625:11
update@http://localhost:3000/.svelte/dev/runtime/internal/start.js:508:38
_navigate@http://localhost:3000/.svelte/dev/runtime/internal/start.js:233:23
init/<@http://localhost:3000/.svelte/dev/runtime/internal/start.js:143:9
EventListener.handleEvent*init@http://localhost:3000/.svelte/dev/runtime/internal/start.js:100:19
start@http://localhost:3000/.svelte/dev/runtime/internal/start.js:1004:20
async*@http://localhost:3000/:222:9

Information about your SvelteKit Installation:

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers:

  System:
    OS: macOS 11.2.3
    CPU: (8) x64 Intel(R) Core(TM) i5-1030NG7 CPU @ 1.10GHz
    Memory: 120.70 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.11.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.7.5 - /usr/local/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Safari: 14.0.3
    Safari Technology Preview: 14.2
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.94 
    svelte: ^3.34.0 => 3.38.1 
    vite: ^2.1.0 => 2.2.3 

• Your browser: Firefox 88.0 64 Bit

• Your adapter (e.g. Node, static, Vercel, Begin, etc…): this happens in development and with adapter-static

Severity This is blocking my upgrade to the latest SvelteKit, but I could roll back to next-84 and it was fine.

[benmccann]

I think it’s weird that you have to put rel=external on a link that’s not actually external to your site. At the very least, we should introduce a sveltekit:external. We might also consider providing a user-configurable option that takes the path to return whether to attempt to route it so that the user can say that anything under static or anything ending in .png, .gif, etc. is not handled by the router

[jasonbuckboyer]

I think using sveltekit:external would be misleading as it’s easily confused with rel="external" which has the semantic meaning of leaving your current site.

sveltekit needs an attribute to handle the cases of dynamic links and/or content pulled from a CMS, but it should be named something like sveltekit:static-link or similar.

That said, it would be nice in the long-term for sveltekit to automatically handle this for the cases it can.