kit icon indicating copy to clipboard operation
kit copied to clipboard

prerendering does not crawl imported images outside of pages

Open PingTouG opened this issue 4 years ago • 3 comments

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

PingTouG avatar May 27 '21 11:05 PingTouG

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;

ignatiusmb avatar Aug 22 '21 14:08 ignatiusmb

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.

bluwy avatar Jan 04 '22 07:01 bluwy

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());

m1212e avatar Sep 21 '22 19:09 m1212e

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

Rich-Harris avatar Jan 06 '23 20:01 Rich-Harris