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-static 1.0.0-next.28 ignores svelte.config.js kit.paths.base for static assets
See original GitHub issueDescribe the bug
Images for a website generated by adapter-static are not loading because the site does not run off of the website root.
Relevant part of svelte.config.js…
kit: {
adapter: adapter({
pages: 'public',
assets: 'public'
}),
paths: {
base: '/front-end/example-svelte'
}
}
Did an npm run build and deployed the content to GitLab Pages. The site was generally functional but gave 404s for every image in my assets folder. The browser tried to load these from the root website instead of /front-end/example-svelte.
This is what was created in /public/index.html (public is my build folder per the svelte.config.js setting above). Note that the paths property for the start() method looks correct…
<!DOCTYPE html>
<html lang="en">
<head>
<title>Salesforce Svelte</title>
<meta charset="utf-8" />
<meta name="description" content="" />
<link rel="icon" href="/front-end/example-svelte/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/front-end/example-svelte/images/logo-light.svg" type="image/svg+xml"/>
<meta http-equiv="content-security-policy" content="">
<link rel="modulepreload" href="/front-end/example-svelte/_app/start-4c099fc5.js">
<link rel="modulepreload" href="/front-end/example-svelte/_app/chunks/vendor-fbfd3ada.js">
<link rel="modulepreload" href="/front-end/example-svelte/_app/chunks/preload-helper-f2490223.js">
</head>
<body>
<div>
<script type="module" data-hydrate="45h">
import { start } from "/front-end/example-svelte/_app/start-4c099fc5.js";
start({
target: document.querySelector('[data-hydrate="45h"]').parentNode,
paths: {"base":"/front-end/example-svelte","assets":"/front-end/example-svelte"},
session: {},
route: true,
spa: true,
trailing_slash: "never",
hydrate: null
});
</script></div>
</body>
</html>
The index.html loaded images correctly in the head because app.html uses %svelte.assets% for image URLs. Svelte components do not. They use relative URLs to load.
For example
<img class="check-circle" src="/images/icons/check-circle.svg" alt="check circle">
While I can manually add import { base} from '$app/paths' and pass this to each URL, I can’t imagine this is the intended approach as it’s extremely time-consuming.
Reproduction
- Create SvelteKit project
npm init svelte@next my-app
cd my-app
npm install @sveltejs/adapter-static@next
- Modify svelte.config.js
import adapter from '@sveltejs/adapter-static'
import preprocess from 'svelte-preprocess'
const production = process.env.NODE_ENV === 'production'
const base = production ? '/front-end/example-svelte': ''
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),
kit: {
adapter: adapter({
pages: 'public',
assets: 'public'
}),
paths: {
base
}
}
}
export default config
- Build the site
npm run build
- Examine the generated /public/index.html file and verify paths passed to start() method are correct.
- Set the contents of /public to load from your favorite web server at /front-end/example-svelte.
- Access the site at http://yourserver/front-end/example-svelte and note the images do not load. Check the 404 errors in the console and you’ll see they are trying to load from the website root.
Logs
No response
System Info
System:
OS: macOS 12.2.1
CPU: (10) arm64 Apple M1 Pro
Memory: 703.45 MB / 32.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 16.14.0 - /opt/homebrew/bin/node
Yarn: 1.22.17 - /opt/homebrew/bin/yarn
npm: 8.5.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: 98.0.4758.102
Firefox: 97.0
Safari: 15.3
npmPackages:
@sveltejs/adapter-static: next => 1.0.0-next.28
@sveltejs/kit: next => 1.0.0-next.272
svelte: ^3.46.4 => 3.46.4
Severity
blocking all usage of SvelteKit
Additional Information
I am trying to convince a team of Angular developers to switch to SvelteKit so I created a simple example in Angular 13.2.2 and SvelteKit 1.0.0-next.272.
I cannot show it to them with the workaround using import { base } from '$app/paths' or I’ll miss the opportunity to win them over.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:1
- Comments:8 (7 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Thanks @vekunz. Stepping back from this a bit, wondering why svelte.config.js’s kit.paths.assets doesn’t allow a relative URL.
Wouldn’t that also solve the problem in perhaps a more elegant way?
It isn’t just static assets, because links in your app would behave the same way. If SvelteKit didn’t behave this way, it wouldn’t be possible to reference assets that are external to SvelteKit (i.e. supplied by wherever you’re hosting the app).
Consider looking into importing images and other assets (from anywhere in
src) to use them without dealing withbasepath stuff. That would also set you on the right track for image optimization, like Vite’s built-in inlining support for sufficiently small images, or something more advanced likevite-imagetools.