kit: adapter-node doesn't work correctly with paths.base

Same issue. Software is not usable for now.

I personally think that this is actually part of a bigger issue and simply copying to the correct folder whilst a quick fix is not a “good fix”. I’ve added changes to my branch that does the quick fix but I don’t like it.

When generating a static site we ultimately will be placing it either in the correct folder OR preferably behind a load-balancing reverse proxy that strips off the prefix and have it served from the root. So the prefix should not exist in the build folder at all but the code will need to know to add the prefix when referring to assets.

When generating a dynamic site it can be passed environment variables (or perhaps read a config file) where it gets its base prefix. In the same way the site could exist behind a reverse proxy that strips off the prefix OR it’ll handle the prefix itself. It matters not as this is an implementation detail of the adapter. The code needs to know to add the prefix when referring to assets and presumably when doing SSR fetching it’ll need to know to add/remove the prefix as necessary.

adapter-node uses Polka to serve its assets, executed with the following code:

const server = polka().use(
	// https://github.com/lukeed/polka/issues/173
	// @ts-ignore - nothing we can do about so just ignore it
	compression$1({ threshold: 0 }),
	handler
);

handler is provided as:

const handler = sequence(
	[
		serve(path.join(__dirname, '/client'), 31536000, true),
		serve(path.join(__dirname, '/static'), 0),
		serve(path.join(__dirname, '/prerendered'), 0),
		ssr
	].filter(Boolean)
);

The issue is that ssr will strip off base from the beginning of the URL but the three serve calls do not. The ssr function IMHO should not be doing this and instead everything should be mounted at the polka().use() call, something like this:

const server = polka().use(
        BASE_PATH,
	// https://github.com/lukeed/polka/issues/173
	// @ts-ignore - nothing we can do about so just ignore it
	compression$1({ threshold: 0 }),
	handler
);

where BASE_PATH would be set either by reading the config file or come in from an environment variable.

This way if I have a reverse proxy that strips prefixes I can have BASE_PATH set to ‘’ but pass the actual base through a header like X-Forwarded-Prefix for when building URL’s.

If I don’t strip the prefix, then I can set BASE_PATH to the prefix so its handled inside Polka instead but otherwise the rest of the code remains the same.

Anyway, that’s my 2c.

Any updates here? I am currently evaluating using Svelte(Kit) in our new app and this would be a showstopper.

The bug the majority in this issue have is fixed now, the base path is taken into account when writing the files to disk. This doesn’t suffice for people with reserved proxies which strip the base path or something related. #7242 tracks that.

I think I figured out where the change needs to happen. In adapter-node/index.js the line that reads:

builder.writeClient(`${out}/client`);

should change to

builder.writeClient(`${out}/client${builder.config.kit.paths.base}`);

I suspect the writePrerendered method call might need modifying too, but I don’t have an example app using prerendering to test that on.

I also suspect their is a similar change in adapter-static that will fix the same issue.

This works, but you still need to specifically set export const prerender = false; for npm run build to work with out errors.

otherwise you stil get this

.svelte-kit/output/server/chunks/hooks.js                          0.49 KiB
file:///tests/sveltekit-container/node_modules/@sveltejs/kit/src/core/prerender/prerender.js:48
                                throw new Error(format_error(details, config));
                                      ^

Error: 404 / does not begin with `base`, which is configured in `paths.base` and can be imported from `$app/paths` (linked from /dash)

with sveltekig.config.js set like this

import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://github.com/sveltejs/svelte-preprocess
	// for more information about preprocessors
	preprocess: preprocess(),

	kit: {
		adapter: adapter(),

		paths: {
			base: "/dash"
		},
		prerender: {
			default: false
		},
		// Override http methods in the Todo forms
		methodOverride: {
			allowed: ['PATCH', 'DELETE']
		}
	}
};

export default config;

Makes me wonder. Why do most build tools assume apps will run on the root? “Hello World” apps maybe, but not “Real World” apps.

base should ALWAYS be a variable, defaulting to “/” maybe yes, but never assume it’s not there.

Two comments:

1. did anyone notice that when running npm run build with paths.base set to, say "/myapp" (sveltekit’s documentation says it should not end with a slash), vite complains it should instead end with a slash? Something is wrong there (see line (!) "base" option should end with a slash.:

# vite build
vite v3.0.8 building for production...
✓ 52 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-400-normal-e43b3538.woff2          15.90 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-all-400-normal-1e3b098c.woff             75.55 KiB
.svelte-kit/output/client/vite-manifest.json                                                       7.60 KiB
.svelte-kit/output/client/_app/immutable/components/error.svelte-1aa22767.js                       1.54 KiB / gzip: 0.71 KiB
.svelte-kit/output/client/_app/immutable/components/pages/_layout.svelte-818ca664.js               4.50 KiB / gzip: 1.74 KiB
.svelte-kit/output/client/_app/immutable/modules/pages/_page.js-07d4ebd9.js                        0.07 KiB / gzip: 0.08 KiB
.svelte-kit/output/client/_app/immutable/modules/pages/about/_page.js-49d56463.js                  0.11 KiB / gzip: 0.11 KiB
.svelte-kit/output/client/_app/immutable/components/pages/_page.svelte-60cbe889.js                 5.46 KiB / gzip: 2.42 KiB
.svelte-kit/output/client/_app/immutable/components/pages/about/_page.svelte-4c2aaaa2.js           2.46 KiB / gzip: 1.11 KiB
.svelte-kit/output/client/_app/immutable/chunks/singletons-e5e57fbd.js                             0.05 KiB / gzip: 0.07 KiB
.svelte-kit/output/client/_app/immutable/components/pages/todos/_page.svelte-e9a45e5b.js           6.86 KiB / gzip: 2.88 KiB
.svelte-kit/output/client/_app/immutable/start-f6a2d763.js                                         22.91 KiB / gzip: 8.71 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-67daab9a.js                                  0.43 KiB / gzip: 0.31 KiB
.svelte-kit/output/client/_app/immutable/chunks/stores-87dd2ac2.js                                 0.53 KiB / gzip: 0.31 KiB
.svelte-kit/output/client/_app/immutable/chunks/_page-d86dbbba.js                                  0.14 KiB / gzip: 0.14 KiB
.svelte-kit/output/client/_app/immutable/chunks/_page-20446a86.js                                  0.18 KiB / gzip: 0.16 KiB
.svelte-kit/output/client/_app/immutable/chunks/0-5939c936.js                                      0.15 KiB / gzip: 0.13 KiB
.svelte-kit/output/client/_app/immutable/chunks/1-3fa30a9b.js                                      0.14 KiB / gzip: 0.13 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-98702734.js                                  11.48 KiB / gzip: 4.90 KiB
.svelte-kit/output/client/_app/immutable/chunks/2-230b0920.js                                      0.20 KiB / gzip: 0.15 KiB
.svelte-kit/output/client/_app/immutable/chunks/3-19d10a99.js                                      0.18 KiB / gzip: 0.15 KiB
.svelte-kit/output/client/_app/immutable/chunks/4-34bae440.js                                      0.18 KiB / gzip: 0.15 KiB
.svelte-kit/output/client/_app/immutable/assets/+page-5c3529b5.css                                 3.70 KiB / gzip: 1.03 KiB
.svelte-kit/output/client/_app/immutable/assets/+page-8bad58d3.css                                 1.45 KiB / gzip: 0.52 KiB
.svelte-kit/output/client/_app/immutable/assets/+page-9682aba9.css                                 0.11 KiB / gzip: 0.10 KiB
.svelte-kit/output/client/_app/immutable/assets/+layout-c589ff87.css                               4.84 KiB / gzip: 1.54 KiB
(!) "base" option should end with a slash.
vite v3.0.8 building SSR bundle for production...
✓ 58 modules transformed.
.svelte-kit/output/server/vite-manifest.json                    3.04 KiB
.svelte-kit/output/server/index.js                              57.72 KiB
.svelte-kit/output/server/entries/pages/_layout.svelte.js       4.09 KiB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js     0.60 KiB
.svelte-kit/output/server/entries/pages/_page.svelte.js         7.10 KiB
.svelte-kit/output/server/entries/pages/_page.js                0.05 KiB
.svelte-kit/output/server/entries/pages/about/_page.svelte.js   1.25 KiB
.svelte-kit/output/server/entries/pages/about/_page.js          0.15 KiB
.svelte-kit/output/server/entries/pages/todos/_page.svelte.js   5.92 KiB
.svelte-kit/output/server/entries/pages/todos/_page.server.js   1.22 KiB
.svelte-kit/output/server/chunks/index.js                       4.15 KiB
.svelte-kit/output/server/chunks/index2.js                      0.73 KiB
.svelte-kit/output/server/chunks/index3.js                      1.29 KiB
.svelte-kit/output/server/chunks/stores.js                      0.81 KiB
.svelte-kit/output/server/chunks/hooks.js                       0.49 KiB
...

1. If the fix for this bug is to move some _app directories in some newly created directory (named like paths.base), why isn’t the fix obvious (in adapter-node or in the build script)?

This bug still exists in the current version. The workaround of moving both the client/_app folder and the contents of the client/static folder to the right place works though.

Similar issues with adapter-static - see #3620 Incorrect build path for prerendered endpoints when setting a basepath

I get the same warning: “(!) “base” option should end with a slash.”

I think I figured out where the change needs to happen. In adapter-node/index.js the line that reads:

builder.writeClient(`${out}/client`);

should change to

builder.writeClient(`${out}/client${builder.config.kit.paths.base}`);

I suspect the writePrerendered method call might need modifying too, but I don’t have an example app using prerendering to test that on.

I also suspect their is a similar change in adapter-static that will fix the same issue.

Oh, I really need this to be fixed. I cannot use the workaround mentioned earlier because my case is one level more complex as I need to use the generated middleware handler in another express server (directus). I cannot control exactly when to .use(handler) and they bind many other middlewares which means that I have to bind the sveltekit handler only to a single subpath (say /dashboard).

.use(handler) without setting paths.base

Both frontends (sveltekit and directus) are confused and nothing works…

.use(handler) with setting paths.base to /dashboard

Sveltekit frontend displays html pages but scripts are not found. But directus does not load correctly.

.use('/dashboard', handler) without setting paths.base

I can access the sveltekit frontend via /dashboard but internal links (href=“{base}/about”) are not working as base is empty and javascript cannot be loaded (urls do not contain /dashboard and thus are not handled by the middleware). Directus works without probems.

.use('/dashboard', handler) with setting paths.base to /dashboard

I can access kit via /dashboard/dashboard (yes duplicated) but the the about page is not available at /dashboard/about (which is build from href=“{base}/about”) but at /dashboard/dashboard/about. Basically I need to duplicate the base path. Strangely now the javascript files can be loaded correctly (at /dashboard/_app/immutable/start-e25cee58.js).

I found I can fix this by removing these lines https://github.com/sveltejs/kit/blob/2a9c19252912d61bd840441fe80dc13366af41f7/packages/kit/src/runtime/server/index.js#L58-L63 Now everything works as expected (i.e. /dashboard and /dashboard/about) at least with my minimal testing.

This is surely not the final solution as the dev server needs those lines and I guess the other adapters need them as well…

I got one step further by adding the base url to the request before passing it to the handler:

    app.use('/dashboard', (req, res, next) => {
      let requestProxy = new Proxy(req, {
        get(target, property) {
          if (property === 'url') {
            return target.baseUrl + (target.url === '/' ? '' : target.url);
          }

          return target[property];
        },
      });

      handler(requestProxy, res, next);
    });

Now the ssr function works correctly (because it strips the basepath we just added) but the static files are not correctly served (because sirv does not strip the basepath) as @bundabrg also noted in https://github.com/sveltejs/kit/issues/3726#issuecomment-1049460340

This is what I am doing to automate the directory structure updates. I chain this script onto my build command. This works for me and I am using this approach for all my Svelte Kit apps (for now).

@seanlail, I think I may still be importing base in my components too. I’ll have to check if that is a necessary step or not. My script doesn’t move server, and I’m pretty sure the server directory has nothing to do with this issue.

import { base } from '$app/paths'

<a href="{base}/about">About</a>

// snippet from svelte.config.js
kit: {
    adapter: adapter(),
    paths: {
        base: isDev ? '' : '/root-path',
    }
}

// snippet from package.json
"scripts": {
  "dev": "svelte-kit dev",
  "build": "svelte-kit build && node path_fix.js",
}

// path_fix.js
import fs from 'fs-extra'
import CONFIG from './svelte.config.js'

const appRoot = CONFIG.kit.paths.base // something like '/root-path'

const clientSrc = `./build/client/_app`
const clientDest = `./build/client${appRoot}/_app` // appRoot leads with a slash

if (fs.exists(clientDest)) {
    fs.removeSync(clientDest)
}

fs.moveSync(clientSrc, clientDest)

const staticSrc = `./build/static`
const staticDest = `./build/static${appRoot}`

if (fs.exists(staticDest)) {
    fs.removeSync(staticDest)
}

fs.mkdirsSync(staticDest)
const contents = fs.readdirSync(staticSrc)

contents
    .filter(entry => entry !== '.DS_Store')
    .forEach(entry => {
        fs.moveSync(`${staticSrc}/${entry}`, `${staticDest}/${entry}`)
    })

As already mentioned, there is a related issue with the static adapter - https://github.com/sveltejs/kit/issues/4528. The workaround of adjusting the directories didn’t work for me but I found a workaround with the following.

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

<a href="{base}/">Home</a>
<a href="{base}/about">About</a>