Asset not found in cache even though it is cached

[aurorarissime]

Hi, using SvelteKit I'm getting this error [vite] (ssr) Error when evaluating SSR module /~iconify/_css/wgl6k7bt.css?inline: Asset not found in cache: /~iconify/_css/wgl6k7bt.css?inline= when trying to load an icon, apparently coming from at LoadPluginContext.load (.../node_modules/@iconify/unplugin/dist/index.mjs:30:43). But as you can see in the screenshot, it is cached..? In the end the icon still loads, but I still get the error server side.
Am I doing something wrong? Am I missing something?

[cyberalien]

This is how build process works: Svelte requests an icon, plugin loads that icon, generates .svelte and .css files, caches .css files and returns .svelte file that links to those .css files.

Resulting .svelte file looks like this (example taken from some other icon, but they are pretty much the same):

<script>
import Icon from '@iconify/css-svelte';
import '../../css/c/cqnud5b.css';

let {width, height, ...props} = $props();

const viewBox = {"width":24,"height":24};
const content = `<path class="cqnud5b" />`;
</script>
<Icon width={width} height={height} viewBox={viewBox} content={content} fallback="akar-icons:air" {...props}></Icon>

Then bundler sees links to .css files, which plugin has cached when generating component, imports them. Plugin can find those files because they are cached and everything works fine.

In your case I suspect component was generated at build time and bundled, but css files weren't bundled. Then you moved whole thing to server without cache, which is normal, so when SvelteKit requested .css file, it plugin could not find it because it has not generated component on server and cache no longer exists.

So that's what I think is going on. Now what can be done about it?

There are 2 solutions:

1. Use @iconify-svelte/akar-icons package.
2. Use custom cache directory and upload it on server after building.

To use custom cache directory, set cacheDir option in plugin:

Icons({
  compiler: 'svelte',
  cacheDir: './_icons'
}),

[aurorarissime]

Thanks for the explanation! Though I'm just on localhost for now, not pushing anything to a remote server, never built the website.
Since I'm using different icon sets I wouldn't want to import all of them, I'll keep this as a last resort.
But from what I saw the actual css file the package is looking for is in a folder named after the first letter of the generated file name, not directly in _css. So if the name of the css file for the icon is wgl6k7bt.css it will be located in the /~iconify/_css/w/ folder, and not /~iconify/_css/ as the error seems to show.
I don't know if this is intentional but this is the first thing that I see that could cause the error