Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Assets are not included for the server (adapter-node) #5240

Closed
maximedupre opened this issue Jun 22, 2022 · 12 comments · Fixed by #9073
Closed

Assets are not included for the server (adapter-node) #5240

maximedupre opened this issue Jun 22, 2022 · 12 comments · Fixed by #9073
Labels
bug Something isn't working ready to implement please submit PRs for these issues! vite
Milestone

Comments

@maximedupre
Copy link

Describe the bug

Bug

If you import an image on the server (e.g. in an endpoint), the file path will point to a non-existent file.

import Image from '$lib/svelte-welcome.webp';

console.log(Image); // /_app/immutable/assets/svelte-welcome-c18bcf5a.webp

When looking in /build/client/_app/immutable/assets folder, the file is not included.

Use case

  1. I am using node-canvas on the server and in this case, I need to place an image on the canvas, so I need the image path
  2. This is not an asset that I want to share publically, which is why I don't want to have it in the static folder

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-eromzr?file=src/routes/todos/_api.js

  1. Run npm run build
  2. Run node build
  3. Click on the "Todos" link
  4. See image path in the console

Logs

No response

System Info

This command doesn't seem to work on StackBlitz 😄

Severity

serious, but I can work around it

Additional Information

I guess I can work around it by having all assets in the static folder, which is included in the build correctly.

But then all the assets are public. So then I guess I can have some sort of logic in hooks.ts that would prevent access to those files.

@7antra
Copy link

7antra commented Jun 29, 2022

This is a serious issue ! Because assets are now considered as route by the layout... so it throws a 404 and even could erase $page.stuff if you use it for metadata in your __error.svelte

@7antra

This comment was marked as off-topic.

@Rich-Harris
Copy link
Member

Rich-Harris commented Jul 20, 2022

possibly related: #1567

@nmfrankel

This comment was marked as off-topic.

@nmfrankel

This comment was marked as off-topic.

@Rich-Harris Rich-Harris added the bug Something isn't working label Sep 20, 2022
@Rich-Harris Rich-Harris added this to the whenever milestone Sep 20, 2022
@Rich-Harris
Copy link
Member

Opened vitejs/vite#11429

caleb531 added a commit to caleb531/personal-website that referenced this issue Jan 4, 2023
Not ideal, but may be necessary for the time being, as there may be an
underlying issue with SvelteKit/Vite re: the use of assets on the server
side. See <sveltejs/kit#5240> for more
details (at least I *think* this may be the root cause).
caleb531 added a commit to caleb531/personal-website that referenced this issue Jan 4, 2023
Not ideal, but may be necessary for the time being, as there may be an
underlying issue with SvelteKit/Vite re: the use of assets on the server
side. See <sveltejs/kit#5240> for more
details (at least I *think* this may be the root cause).
@LukaHarambasic
Copy link

Does a workaround exist?

@Rich-Harris
Copy link
Member

Yes, import the assets somewhere in your client code. As long as you don't use them in client code, the paths will be treeshaken away so they won't impact your client-side bundle size.

@thechubbypanda
Copy link

thechubbypanda commented Jan 26, 2023

I just tried vite 4.1.0-beta.1 which should have the fix from vitejs/vite#11429 and my similar error still occurs, are others still seeing the same thing?

For reference, my issue is a file static/graphic.svg referenced once in one component as a css background url.

@matfantinel
Copy link

matfantinel commented Jan 31, 2023

@thechubbypanda I'm also still facing the error with vite 4.1.0-beta.1, but I don't think it includes the fix, since it's not on the changelog document yet.

Edit: seems like it was added to the changelog (as #11430) but the error still occurs with Vite 4.1.1

caleb531 added a commit to caleb531/personal-website that referenced this issue Feb 12, 2023
This was accomplished by moving the thumbnail generation (using
vite-imagetools) from the server to the client. This is supposedly
because SvelteKit does not currently have support for loading non-raw
assets on the server side (per
<sveltejs/kit#5240>). At least, moving the
logic to the front end worked like a charm.
@mahi160
Copy link

mahi160 commented Feb 15, 2023

I had a similar issue with production. I used as background-image: url('images/hexagon.svg') in the <style></style>, but was not getting the image in the production. It was searching in _app/immutable.

But when i put the url as variable in the script, and did an inline styling lin style="background-image: url({src})" it worked just fine!
This example helped me.

image
image

@benmccann benmccann added ready to implement please submit PRs for these issues! and removed blocked by upstream labels Feb 16, 2023
@benmccann
Copy link
Member

Vite 4.1 will copy the server assets to .sveltekit/output/server, but we need to update the builder used by the adapter to copy the assets from both the server and client to the final output directory

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working ready to implement please submit PRs for these issues! vite
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants