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.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:14
  • Comments:14 (2 by maintainers)

github_iconTop GitHub Comments

8reactions
shot-codescommented, Jun 23, 2022

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>
3reactions
KevinChassagnecommented, Apr 27, 2022

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

svelte.config ---> paths.base / 404 ??? : r/sveltejs - Reddit
im trying to deploy a svelte app to a folder on the root of my site. I added the folder name to the...
Read more >
@sveltejs/adapter-static - npm
@sveltejs/adapter-static. Adapter for SvelteKit apps that prerenders your entire site as a collection of static files.
Read more >
SvelteKit - Deployment - @sveltejs/adapter-static not updating ...
Ok I found out that I was setting the wrong parameters, so I fixed it and here's the working svelte.config.js (meaning that this...
Read more >
@sveltejs/adapter-static | Yarn - Package Manager
Usage. Install with npm i -D @sveltejs/adapter-static , then add the adapter to your svelte.config.js ...
Read more >
Configuration • Docs • SvelteKit
As well as SvelteKit, this config object is used by other tooling that integrates with Svelte such as editor extensions. svelte.config.js. ts. import...
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