Assets not output when imported in +page.server.ts

[liegeandlief]

Describe the bug

I previously raised this bug - #8224

It was closed because it was a duplicate of #5240 which has been closed as resolved by #9073

But this is still an issue for me. The problem doesn't occur when running the dev server only when running vite build and vite preview. I am using the

Is there something I need to do to get this to work?

Reproduction

See #8224

Logs

No response

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 76.92 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.volta/tools/image/node/18.16.0/bin/node
    Yarn: 3.3.0 - ~/.volta/tools/image/yarn/3.3.0/bin/yarn
    npm: 9.5.1 - ~/.volta/tools/image/npm/9.5.1/bin/npm
  Browsers:
    Chrome: 113.0.5672.92
    Firefox: 113.0
    Safari: 16.4
  npmPackages:
    @sveltejs/adapter-vercel: ^2.0.2 => 2.4.3
    @sveltejs/kit: ^1.0.0 => 1.16.3
    svelte: ^3.44.0 => 3.59.1
    vite: ^4.0.0 => 4.3.7

Severity

serious, but I can work around it

Additional Information

No response

[Serator]

It doesn't work for me too. Does anyone have a solution to this issue?

[teemingc]

Can you please provide a minimal reproduction in the form of a repository?

[Serator]

@s3812497 Yeah, sure: https://github.com/Serator/Assets-not-output-when-imported-in-page.server.ts.

• I modified the vite.config.js file by adding build: {assetsInlineLimit: 0}, so that assets would not be base64 encoded.
• I also added src/routes/manifest.webmanifest/+server.ts with 2 assets.

---

• npm run dev:
  
• npm run build; npm run preview:
  

[teemingc]

@Serator I can't confirm if this is a bug or intended behaviour. The assets are included in the build as server assets (which are not publicly exposed), but we want to publicly expose them (client assets). This should automatically occur for assets imported in client-side code (+page.js, +page.svelte, etc.), but does not for server code (+server.js, etc.).

The only solution I know to this is to include your files in the static directory and provide the absolute path to them /icon-192.png. This has its drawbacks (no hashing) and perhaps there should be way to import them through Vite on server only code but still be served as a client asset?

EDIT: A hacky workaround is to just arbitrarily include it in client-side code.

// routes/manifest.webmanifest/+page.js
import icon192 from './assets/icon-192.png';
import icon512 from './assets/icon-512.png';

Perhaps we need an option to include server assets as client assets similar to vite-plugin-ssr? https://vite-plugin-ssr.com/includeAssetsImportedByServer

[Serator]

... to include your files in the static directory and provide the absolute path to them /icon-192.png.

That's exactly what I did, but in the long run I'd like to be able to add assets without this trick.

[Serator]

A hacky workaround is to just arbitrarily include it in client-side code.

This looks like a hack and it's going to be hard to figure out what's going on here, even though that's what works.

[teemingc]

The solution might best be provided by Vite and so I've provided feedback here vitejs/vite#13808

EDIT: we may have to implement it in Kit itself as suggested here vitejs/vite#13808 (reply in thread)

[teemingc]

@Serator @liegeandlief I've made a mistake in identifying the issue. As pointed out by vitejs/vite#13808 (reply in thread) SvelteKit always copies server assets to be available client-side (public). The only instance where the assets are not being exposed publicly is when adapter-auto builds and cannot detect the production environment.

As long as you specify the adapter or prod environment, this shouldn't be an issue.

[Serator]

@s3812497 What do you mean by prod environment? Could you please tell more about it or give a link to the documentation?

[teemingc]

@s3812497 What do you mean by prod environment? Could you please tell more about it or give a link to the documentation?

adapter-auto automatically installs a suitable adapter by detecting the production environment based on these environment variables https://github.com/sveltejs/kit/blob/master/packages/adapter-auto/adapters.js

e.g., VERCEL=1 is present when deploying to the Vercel platform (the production environment) so adapter-vercel is installed and used to build.

If you see this warning after building your app with adapter-auto, the bug will occur because it does not know which adapter to use.

> Using @sveltejs/adapter-auto
  Could not detect a supported production environment. See https://kit.svelte.dev/docs/adapters to learn how to configure your app to run on the platform of your choosing