SvelteKit 1.9 and 1.10 using "base" config parameter and static adapter creates wrong imports (falsely prependended by ".").

[mdi22]

Describe the bug

Using the static adapter (sveltejs/adapter-static), Sveltekit builds wrong links in the created HTML files.
The "base" parameter ist set to "build" so that the application is found in a sub-path "/build".
See "base" parameter under https://kit.svelte.dev/docs/configuration#paths

In sveltejs/kit Version 1.8.8 a typical link in a created index.html looks like that:

<link rel="modulepreload" href="/build/_app/immutable/entry/start.84521e90.js">

In sveltejs/kit Version 1.10.0 and 1.9.0 it looks like that:

<link rel="modulepreload" href="./build/_app/immutable/entry/start.84521e90.js">

A dot (".") is prepended the created href, leading to a wrong path:
when accessing "http://localhost/build/index.html", the dot leads to a path reference to "http://localhost/build/build/_app/immutable/entry/start.84521e90.js"

It seems this behavior makes the "base" parameter obsolete, as the sveltekit app is always accessible in any sub directory without any further need of configuration, because no absolute paths are used anymore.

That new behaviour is great!
But only if the base parameter is not set, otherwise the site is broken.

Still, in the documentation
https://kit.svelte.dev/docs/configuration#paths
there is written to use the "base" parameter in the case of non-root-paths.

If I understand everything right, the solution can simply be to update the documentation, that no base parameter is needed anymore (remove it from documentation).
Also, an existing base parameter must be ignored and marked deprecated, or lead to an error with the message, that this parameter is not available/allowed anymore.

Reproduction

I am using sveltejs/kit 1.9.0 or 1.10.0 and sveltejs/adapter-static 2.0.1

The vite config is:

import { sveltekit } from '@sveltejs/kit/vite'

const config = {
	plugins: [sveltekit(),],
	server: {
		port: 3000,
		fs: {
			// Allow serving files from one level up to the project root
			allow: ['..']
		},
		base: "/build"
	},
	preview: {
		port: 3000
	},
	test: {
		globals: true
	}
}
export default config

The Svelte configuration is:

import adapter_static from '@sveltejs/adapter-static'
import preprocess from 'svelte-preprocess'

const config = {
	preprocess: preprocess(),
	onwarn(warning, defaultHandler) {
		defaultHandler(warning)
	},
	kit: {
		adapter: adapter_static(),
		paths: {
			base: "/build"
		}
	}
}
export default config

Logs

No response

System Info

System:
    OS: Linux 6.1 Ubuntu 22.10 22.10 (Kinetic Kudu)
    CPU: (16) x64 AMD Ryzen 7 6800U with Radeon Graphics
    Memory: 2.17 GB / 13.33 GB
    Container: Yes
    Shell: 5.2.2 - /bin/bash
  Binaries:
    Node: 19.7.0 - /usr/bin/node
    npm: 9.5.0 - /usr/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Firefox: 110.0.1
  npmPackages:
    @sveltejs/adapter-auto: ^2.0 => 2.0.0 
    @sveltejs/adapter-node: ^1.2 => 1.2.1 
    @sveltejs/adapter-static: ^2.0 => 2.0.1 
    @sveltejs/kit: 1.9.0 => 1.9.0 
    svelte: ^3.55 => 3.55.1

Severity

serious, but I can work around it

Additional Information

No response

[Rich-Harris]

I don't really understand what you're trying to do — why are you setting server.base in your Vite config? paths.base in your Svelte config is only needed if you're deploying your app to a /build path, it's nothing to do with the fact that adapter-static creates a build directory.

[Sparrow0hawk]

I also see this behaviour when trying to deploy to GitHub pages (I get a 404 error) - Sparrow0hawk/mynearestwardmarginal-svelte#1

I have only set paths in the svelte.config.js:

import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {

	kit: {
		adapter: adapter({
			// default options are shown. On some platforms
			// these options are set automatically — see below
			pages: 'build',
			assets: 'build',
			fallback: null,
			precompress: false,
			strict: true
		}),
		paths: {
			base: process.env.NODE_ENV === "production" ? "/mynearestwardmarginal-svelte" : ""
		}
	}
};

export default config;

That repo is using kit version 1.10.0, if I revert to 1.8.8 I get the correct paths.

[mdi22]

Dear @Rich-Harris,
thanks for the fix!
It's much appreciated!

[mdi22]

Unfortunately not fixed (for me) in PR 9343:
#9343 (comment)

[SirRFI]

I stumbled upon this problem when following several guides on how to use SvelteKit to generate static website for Github Pages. The guides say to use static adapter, add paths.base with repository's name like /my-repo, also as some more things.

So, the dot prefix appears for CSS/JS files, which on Github Pages cause the base path to be added twice (like ...github.io/my-repo/my-repo/_app/...), therefore not loading said files at all. Removing paths.base setting resolves the problem.

[charlyoleg]

Thank you @SirRFI ! Removing paths.base from svelte.config.js also seems to fix my github-page. But after analysis, this isn't a good fix as favicon and other images coming from static are not found anymore. I'm using SvelteKit 1.12.

[charlyoleg]

Removing paths.base from svelte.config.js just fixed apparently the issue with the root/first page but favicon and other links to static-content are broken. Personally, I have re-enabled the paths.base and have the bug on the root/first page. Notice that the other pages do not have the issue. And if you visit the root/first page from an other page, you also don't have the issue.

[charlyoleg]

This issue of not finding js and css because of wrong path "mybase/mybase" is visible on github page but also locally if you add a trailing / in the url of the browser.

localhost:4173/mybase : doesn't have the issue
localhost:4173/mybase/ : has the issue
localhost:4173/mybase/otherpage : doesn't have the issue
localhost:4173/mybase/otherpage/ : ask for redirection

[ThatXliner]

This bug seems to be preventing me from deploying to GitHub Pages. I'm trying https://kit.svelte.dev/docs/adapter-static#github-pages

[ThatXliner]

This bug seems to be preventing me from deploying to GitHub Pages. I'm trying https://kit.svelte.dev/docs/adapter-static#github-pages

It seems to be that just setting the base to "" works. Therefore, I suggest that the docs be updated