Deploying static site to subfolder leads to 404s for most assets in SvelteKit v1.22.1

[danieldiekmeier]

Describe the bug

Starting with SvelteKit 1.22.1, using adapter-static to deploy to a subfolder no longer works. It seems likely that the change from https://github.com/sveltejs/kit/releases/tag/%40sveltejs%2Fkit%401.22.1 is responsible:

perf: only have Vite generate relative paths when required

I noticed probably relevant changes in build/_app/immutable/entry/app.*.js:

• In 1.22.0, it loads additional JS chunks from a relative path, like ../chunks/...
• In 1.22.1, it loads them from _app/immutable/chunks/..., which does not work.

@benmccann suggested that paths.relative may fix it, but it doesn't seem like that to me.

I prepared a minimal reproduction that demonstrates and explains this better than a lot of prose, I think.

---

My current workaround is to downgrade back to SvelteKit 1.22.0.

Reproduction

https://github.com/danieldiekmeier/reproduction-sveltekit-relative

Reproduction steps are in the README.md.

Logs

No response

System Info

System:
    OS: macOS 13.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 83.11 MB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.asdf/installs/nodejs/18.16.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.16.0/bin/yarn
    npm: 9.5.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: 113.0.1774.57
    Firefox: 103.0.2
    Firefox Developer Edition: 114.0
    Safari: 16.5.1
    Safari Technology Preview: 17.0
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.0 
    @sveltejs/adapter-static: ^2.0.2 => 2.0.2 
    @sveltejs/kit: ^1.22.1 => 1.22.1 
    svelte: ^4.0.0 => 4.0.5 
    vite: ^4.3.6 => 4.4.2

Severity

blocking an upgrade

Additional Information

No response

[eltigerchino]

I think this is caused by the preload <link> tags added by Vite that do not take into account the base config setting. Fortunately, the page should still work(?). If you check the network tab, the JS files load successfully (from the link tags added by kit), while the duplicate ones fail because of the wrong path.

This duplicate preloads are also causing the double CSS as reported in #10379

[danieldiekmeier]

Yes, I think you're right! The JavaScript does get executed, and Vite tries to add the <link> tags to the page again – because even though it checks whether they already are in the head, it doesn't find them because it does not take the base config setting into account.

I thought it was different/worse, because in my case, the site does actually completely crash because the 404 pages on my webhost served as HTML, which violates the expected mime type:

(It showed the pre-rendered HTML for a very short time, then switched it out for the error message when the loading failed.)

This means that while there may be cases where it doesn't matter, I still can't update to the latest SvelteKit.

[eltigerchino]

Ugh, I've completely overlooked this and found out the svelte.config.js file is just configured incorrectly.
@danieldiekmeier Your paths option should be specified next to adapter, not inside it.

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
-      paths: {
-        base: dev ? '' : '/build',
-        relative,
      },
    }),
+   paths: {
+     base: dev ? '' : '/build',
+     relative,
+   },
  },
}

Aside from this, you've helped discover a bug when base is not specified!

[danieldiekmeier]

Oh nooooo, I'm so sorry! You're absolutely right. When configured correctly, the problem does not occur. I don't know if that's possible, but maybe the TypeScript types for the SvelteKit/Adapter Config can be improved to warn against wrong usage like this?

Again, I'm really sorry for wasting your time with this. Thank you for helping me, and thank you for being so kind about it! (And I'm glad I was at least able to help discover another bug.)