kit: Setting paths.base in svelte.config.js causes adapter-static to fail (404)

Describe the bug

adapter-static fails when I run npm run build and I have set paths.base to some path (as intended to eventually deploy on GitHub pages). The build process returns a 404 as it cannot find the appropriate routes or static resources.

Reproduction

I created an empty project to reproduce the behavior. I am using the adapter-static to build a production version of the site. I followed the steps from the ReadMe.

I have created 1 additional route: /a/index.svelte In the root index /index.svelte I created a reference to this route: <a href="/a" title="a link">a link</a> as well as a reference to an image (the already present favicon): <img alt="course-title" src="favicon.png" />

Commenting out either one of the produces the same error. The build process stops when the first error occurs, but it seems it is regardless of whether it’s a route or static resource reference.

The error is: 404 /a (linked from /your-repo-name) or 404 /favicon.png (linked from /your-repo-name)

In svelte.config.js I have set paths.base to /your-repo-name, basically a copy of the description in the ReadMe for adapter-static. Setting this paths.base to an empty string does not produce the error. Also setting prerender to false also doesn’t produce the error, but obviously, that’s not what I want here.

Logs

svelte.config.js

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

const dev = process.env.NODE_ENV === 'development';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		// adapter: adapter()
		// adapter: firebase()
		adapter: adapter(),
		prerender: {
			default: true
		},
		paths: {
			base: dev ? '' : '/your-repo-name'
		},
		appDir: 'internal'
	}
};

package.json:

{
	"name": "test",
	"version": "0.0.1",
	"scripts": {
		"dev": "svelte-kit dev",
		"build": "svelte-kit build",
		"package": "svelte-kit package",
		"preview": "svelte-kit preview",
		"prepare": "svelte-kit sync",
		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/adapter-static": "^1.0.0-next.29",
		"@sveltejs/kit": "next",
		"eslint": "^7.32.0",
		"eslint-config-prettier": "^8.3.0",
		"eslint-plugin-svelte3": "^3.2.1",
		"gh-pages": "^3.2.3",
		"prettier": "^2.5.1",
		"prettier-plugin-svelte": "^2.5.0",
		"svelte": "^3.44.0",
		"svelte-adapter-firebase": "^0.13.1"
	},
	"type": "module"
}

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
    Memory: 258.53 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Chrome: 99.0.4844.84
    Edge: 100.0.1185.29
    Firefox: 95.0.2
    Safari: 15.4
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.34
    @sveltejs/adapter-static: ^1.0.0-next.29 => 1.0.0-next.29
    @sveltejs/kit: next => 1.0.0-next.306
    svelte: ^3.44.0 => 3.46.6

Severity

blocking an upgrade

Additional Information

No response

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 15
  • Comments: 15 (2 by maintainers)

Commits related to this issue

Most upvoted comments

I managed to find a workaround by importing base from $app/paths and prepending it to my hrefs:

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

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

Try with a config.kit.prerender.entries: [] It’s working for me 😃

just tried with the skeleton build and latest (kit v328 and static v30) and reproduced the 404. config.kit.prerender.entries: [] doesn’t generate html files.

I managed to find a workaround by importing base from $app/paths and prepending it to my hrefs:

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

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

this save my life, the error during npm run build actually mention we should import $app/paths but with this sample post everything become clear 😃 thank you.