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

[maximedupre]

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]

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]

https://github.com/sveltejs/kit/pull/4974

[Rich-Harris]

possibly related: #1567

[nmfrankel]

I just got this issue using @sveltejs/[email protected] and my auto deploys (using adapter-auto) on vercel started throwing 404 for missing static files.

Here's my package.json

{
	"name": "parshandata-frontend",
	"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",
		"check": "svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
		"lint": "prettier --check --plugin-search-dir=. .",
		"format": "prettier --write --plugin-search-dir=. ."
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "^1.0.0-next.64",
		"@sveltejs/adapter-static": "^1.0.0-next.39",
		"@sveltejs/kit": "next",
		"@types/cookie": "^0.5.1",
		"prettier": "^2.6.2",
		"prettier-plugin-svelte": "^2.7.0",
		"svelte": "^3.46.0",
		"svelte-check": "^2.7.1",
		"svelte-preprocess": "^4.10.6",
		"tslib": "^2.3.1",
		"typescript": "^4.7.2"
	},
	"type": "module",
	"dependencies": {
		"cookie": "^0.4.1"
	}
}

[nmfrankel]

Everything is now working after doing npm update.

I got the following message with directions to change config

svelte-kit build is no longer available — use vite build instead

All good 😊

[Rich-Harris]

Opened https://github.com/vitejs/vite/issues/11429

[LukaHarambasic]

Does a workaround exist?

[Rich-Harris]

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.

[yottapanda]

I just tried vite 4.1.0-beta.1 which should have the fix from https://github.com/vitejs/vite/issues/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]

@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

[mahi160]

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.

[benmccann]

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