question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Describe the bug

Basically, we have this svelte.config.js.

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

const config = {
    kit: {
        adapter: adapter(),
        paths: {
            base: '/basepath'
        },
    }
};
export default config;

When we now run svelte-kit build, it produces this folder structure (partly):

build
    client
        _app
            ...
    server
        ...
    static
        ...

the problem now is that the browser is not able to fetch the files in client and static. The node server returns status code 404 for these files.

The browser requests the files like this: http://localhost:3000/basepath/_app/....

If we manually modify the folder structure to this (manually add a basepath folder in client and static) it works fine.

build
    client
        basepath
            _app
                ...
    server
        ...
    static
        basepath
            ...

It seems that the adapter-node forgets to take paths.base into account for the static files.

By the way: If I start the build with svelte-kit preview, it works fine. Just starting it with node build does not work.

Reproduction

I created a simple demo app based on the npm init svelte@next command.

https://github.com/vekunz/svelte-paths-base-demo

Logs

basepath:1 GET http://localhost:3000/basepath 404 (Not Found)
basepath:9 GET http://localhost:3000/basepath/_app/assets/pages/__layout.svelte-ace81755.css net::ERR_ABORTED 404 (Not Found)
basepath:10 GET http://localhost:3000/basepath/_app/start-5dffe62e.js net::ERR_ABORTED 404 (Not Found)
basepath:19 GET http://localhost:3000/basepath/_app/assets/svelte-logo-87df40b8.svg 404 (Not Found)
basepath:13 GET http://localhost:3000/basepath/_app/error.svelte-bf7b1a86.js net::ERR_ABORTED 404 (Not Found)
basepath:11 GET http://localhost:3000/basepath/_app/chunks/vendor-ee294e9e.js net::ERR_ABORTED 404 (Not Found)
basepath:12 GET http://localhost:3000/basepath/_app/pages/__layout.svelte-1bb88ece.js net::ERR_ABORTED 404 (Not Found)

System Info

System:
    OS: Windows 10 10.0.18363
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
    Memory: 16.61 GB / 31.79 GB
  Binaries:
    Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 97.0.4692.99
    Edge: Spartan (44.18362.1593.0)
    Internet Explorer: 11.0.18362.1766
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.17
    @sveltejs/adapter-node: ^1.0.0-next.67 => 1.0.0-next.67
    @sveltejs/kit: next => 1.0.0-next.260
    svelte: ^3.46.0 => 3.46.4

Severity

blocking all usage of SvelteKit

Additional Information

It seems that in my example app moving the static files in a basepath subdirectory does not work also.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:30
  • Comments:23 (3 by maintainers)

github_iconTop GitHub Comments

16reactions
joelhickokcommented, Feb 4, 2022

Same issue. Software is not usable for now.

8reactions
bundabrgcommented, Feb 24, 2022

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Absolute path in the tsconfig doesn't work - node.js
Unfortunately (and I don't know why) the Typescript compiler currently does not support the paths transformation very well.
Read more >
Configuration Reference - Astro Documentation
The base path to deploy to. Astro will build your pages and assets using this path as the root. Currently, this has no...
Read more >
Path | Node.js v19.3.0 Documentation
The node:path module provides utilities for working with file and directory paths. It can be accessed using: const path = require('node:path'); ...
Read more >
How we converted our Node.js library to Deno (using Deno)
adapter.node.ts import * as path from "path"; import * as util from "util"; ... the same functionality, everything should work as expected.
Read more >
SvelteKit API | SK Incognito - Vercel
npm run dev — Start the application in development mode, watching source file ... kit: { adapter: string; target: string; appDir?: string; paths?:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found