prerendering does not crawl imported images outside of pages
Describe the bug
routes/todos/index.json.ts imports an image. When using @sveltejs/adapter-static, npm run build produces a 404 error
Logs
404 /_app/assets/industry_1.166d527b.png (linked from /todos)
To Reproduce Checkout https://github.com/PingTouG/svelte-kit-bug. An image was added to the todos tab as shown below
src/routes/todos/index.json.ts
import welcomeImg from '$lib/images/home/industry_1.png';
....
export const get: RequestHandler<Locals> = async (request) => {
....
return { body: { welcomeImg } }
src/routes/todos/index.svelte
....
<img src={welcomeImg} />
.....
Expected behavior
npm run build is ok
Information about your SvelteKit Installation:
Diagnostics
-
@sveltejs/kit : next
-
@sveltejs/adapter-static : ^1.0.0-next.11
-
svelte : ^3.34.0
-
chorme
Severity The website cannot run
This only happens for prerendered pages. Images imported images outside of pages, in this case an endpoint, does not get crawled. The error would also appear if we use adapter-node and set export const prerender = true;
This is because assets are only generated for the client side builds (which doesn't bundle endpoints). SSR builds (which bundles endpoints) don't generate assets. To workaround this, you can specify all the possible links from SSR in the client bundle like this, which shouldn't impact bundle size, but not the most ergonomic way of handling it.
I'm not sure how we should handle this though, perhaps SvelteKit can have Vite crawl for asset imports in endpoints. I also think I've seen a similar issue in Vite but I can't find it.
Converting images to a blob worked for me as a workaround. The +server.ts returns this:
const result = fetch(...)
return new Response(await result.blob());
closing as a dupe of #5240 (even though this issue was first) — the underlying issue is https://github.com/vitejs/vite/issues/11429, and there's a fix here https://github.com/vitejs/vite/pull/11430