Can't build if the base is changed

[NatoBoram]

Describe the bug

It doesn't seem possible to build the project if the base is different from /.

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: preprocess(),
	kit: {
		adapter: adapter(),
		paths: {
			base: '/second-base'
		}
	}
};

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-e2xkzk?file=svelte.config.js

Logs

❯ npm run build
$ vite build
vite v2.9.14 building for production...
✓ 34 modules transformed.
.svelte-kit/output/client/_app/immutable/assets/svelte-logo-87df40b8.svg                           1.85 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-cyrillic-ext-400-normal-3df7909e.woff2   15.40 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-cyrillic-400-normal-c7d433fd.woff2       8.89 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-greek-ext-400-normal-9e2fe623.woff2      7.33 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-greek-400-normal-a8be01ce.woff2          10.27 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-latin-ext-400-normal-6bfabd30.woff2      11.10 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-latin-400-normal-e43b3538.woff2          15.90 KiB
.svelte-kit/output/client/_app/immutable/assets/fira-mono-all-400-normal-1e3b098c.woff             75.55 KiB
.svelte-kit/output/client/_app/manifest.json                                                       2.88 KiB
.svelte-kit/output/client/_app/immutable/start-a1c478ce.js                                         23.46 KiB / gzip: 8.75 KiB
.svelte-kit/output/client/_app/immutable/pages/__layout.svelte-f4106418.js                         4.78 KiB / gzip: 1.87 KiB
.svelte-kit/output/client/_app/immutable/error.svelte-3108b229.js                                  1.56 KiB / gzip: 0.75 KiB
.svelte-kit/output/client/_app/immutable/pages/about.svelte-b7b8ad3b.js                            2.51 KiB / gzip: 1.15 KiB
.svelte-kit/output/client/_app/immutable/pages/index.svelte-f3865f05.js                            5.47 KiB / gzip: 2.43 KiB
.svelte-kit/output/client/_app/immutable/pages/todos/index.svelte-1522aaac.js                      6.86 KiB / gzip: 2.88 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-8cfcc69b.js                                  11.81 KiB / gzip: 5.03 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-26741719.js                                  0.43 KiB / gzip: 0.30 KiB
.svelte-kit/output/client/_app/immutable/chunks/singletons-cdeec3fd.js                             0.05 KiB / gzip: 0.07 KiB
.svelte-kit/output/client/_app/immutable/assets/pages/__layout.svelte-45a60d7c.css                 5.22 KiB / gzip: 1.56 KiB
.svelte-kit/output/client/_app/immutable/assets/pages/about.svelte-bf4528fa.css                    0.11 KiB / gzip: 0.10 KiB
.svelte-kit/output/client/_app/immutable/assets/pages/index.svelte-e12bfb09.css                    1.45 KiB / gzip: 0.52 KiB
.svelte-kit/output/client/_app/immutable/assets/pages/todos/index.svelte-a910a02d.css              3.70 KiB / gzip: 1.03 KiB
vite v2.9.14 building SSR bundle for production...
✓ 35 modules transformed.
.svelte-kit/output/server/manifest.json                         2.46 KiB
.svelte-kit/output/server/index.js                              74.00 KiB
.svelte-kit/output/server/entries/endpoints/todos/index.js      1.33 KiB
.svelte-kit/output/server/entries/pages/__layout.svelte.js      4.63 KiB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js     0.73 KiB
.svelte-kit/output/server/entries/pages/about.svelte.js         1.39 KiB
.svelte-kit/output/server/entries/pages/index.svelte.js         8.22 KiB
.svelte-kit/output/server/entries/pages/todos/index.svelte.js   5.94 KiB
.svelte-kit/output/server/immutable/chunks/index-59c70007.js    4.13 KiB
.svelte-kit/output/server/immutable/chunks/hooks-5a10edf9.js    0.46 KiB
(node:13) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
[vite-plugin-svelte-kit] 404 / (linked from /second-base/about)

> Using @sveltejs/adapter-auto
Error: 404 / (linked from /second-base/about)
    at normalise_error_handler/<@file:///home/projects/sveltejs-kit-template-default-e2xkzk/node_modules/ (sveltejs/kit/dist/vite.js:1138:11)
    at visit@file:///home/projects/sveltejs-kit-template-default-e2xkzk/node_modules/ (sveltejs/kit/dist/vite.js:1232:9)
    at enqueue/<@file:///home/projects/sveltejs-kit-template-default-e2xkzk/node_modules/ (sveltejs/kit/dist/vite.js:1222:27)
    at dequeue@file:///home/projects/sveltejs-kit-template-default-e2xkzk/node_modules/ (sveltejs/kit/dist/vite.js:805:42)
    at dequeue/<@file:///home/projects/sveltejs-kit-template-default-e2xkzk/node_modules/ (sveltejs/kit/dist/vite.js:814:7)
    at <anonymous> (<anonymous>) {
  code: 'PLUGIN_ERROR',
  plugin: 'vite-plugin-svelte-kit',
  hook: 'writeBundle'
}

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.55 
    @sveltejs/kit: next => 1.0.0-next.368 
    svelte: ^3.46.0 => 3.49.0 
    vite: ^2.9.13 => 2.9.14

Severity

serious, but I can work around it

Additional Information

https://kit.svelte.dev/docs/configuration#paths

paths

An object containing zero or more of the following string values:

• assets — an absolute path that your app's files are served from. This is useful if your files are served from a storage bucket of some kind
• base — a root-relative path that must start, but not end with / (e.g. /base-path), unless it is the empty string. This specifies where your app is served from and allows the app to live on a non-root path

I'm trying to serve an app from a base that's not / but I can't get it to build because of a mysterious [vite-plugin-svelte-kit] 404 error.

Additionally, I can't find a <base /> tag in the <head> when running pnpm run dev

[Conduitry]

Is this a duplicate of #3620? Maybe also related to #3726 although that one is for adapter-node.

[NatoBoram]

In these two issues, they are able to build their apps even with a different base, which is weird.

• Even after upgrading Incorrect build path for prerendered endpoints when setting a basepath (kit.paths.base) #3620 to Vite, it can still build with its different base
• adapter-node doesn't work correctly with paths.base #3726, however, can't build after upgrading it to Vite

Because base hasn't been set inside index.html, my guess is that links starting with / aren't handled correctly.

[Rich-Harris]

This...

404 / (linked from /second-base/about)

...is expected — your about.svelte page links to / (via the Header.svelte component), which doesn't exist because you have paths.base set. Do we just need a clearer error message?

There's no <base> tag, they cause more problems than they solve

[NatoBoram]

Ah! Got it. I just assumed that it would handle different roots automatically, sorry about that.

I think that a note could be added in cases where the base is changed. For example:

404 / (linked from /second-base/about)
Note: After modifying kit.paths.base in svelte.config.js, all root-relative links must include this new base.

On that subject, is there a way to access environment variables like Vite does in svelte.config.js? That would be useful for handling deployments on different services where they could have different bases. I tried to import dotenv but that breaks how Vite uses them...

---

Right now, I've got something like this:

import { loadEnv } from 'vite';
const env = loadEnv(process.env.NODE_ENV ?? 'development', process.cwd());

[shasherazi]

So is there any solution to it? How do I make all root-relative links include the new base?

[Rich-Harris]

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

<a href="{base}/wheee">i am a link</a>

[shasherazi]

@Rich-Harris this deploys the site but styles in the global.css don't apply. I made the global.css as described here

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

@shasherazi

Is your global.css in the folder specified by config.kit.paths.assets?