[Vite plugin]: assets only imported in resource routes not included in build output

[manzano78]

What version of Remix are you using?

v0.0.0-nightly-99a8d9c-20231031

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

Exactly the same issue than this one with the current compiler : #3414

1. Configure a project with the new unstable vite plugin as compiler
2. Create a resource route module which imports an asset as an URL and exposes it via the loader

import stylesheetUrl from './stylesheet.css?url'; // vite syntax

export function loader() {
  return json({ stylesheetUrl });
}

The issue also occurs on normal UI routes when the URL is only used in the loader, server side.

3. npm run build

Expected Behavior

I would expect the asset to be included in the build output

Actual Behavior

The asset is not included in the build output

[hi-ogawa]

It seems vite now provides build.ssrEmitAssets option which solved similar issues initially came up on sveltekit:

• Stabilizing `build.ssrEmitAssets` vitejs/vite#13808

Further context on sveltekit:

• Assets are not included for the server (adapter-node) sveltejs/kit#5240
  • this original issue also suggest potential user-side workaround in this comment
• fix: deploy server assets sveltejs/kit#9073

[manzano78]

@hi-ogawa, thanks for this information! I've just tried it, indeed it now generates the assets but in the server build folder instead of the public one. Consequently, it's still produces 404s in the browser :-/

[hi-ogawa]

@manzano78 Thanks for experimenting it. Indeed, just setting the option in the user config alone is not a complete solution.

Looking at svelte's case sveltejs/kit#9073, what they ended up doing is to simply copy over all "server" assets to "client" assets.
It might depend on how you configure remix build directories, but a similar thing could be achieved by just simple script like:

cp -f build/assets/* public/build/assets

then this can be simply chained together in build script:

 "build": "vite build && vite build --ssr && cp -f build/assets/* public/build/assets"

[manzano78]

@hi-ogawa thank you very much for your help, I appreciate! This solution seems okay for the production build but I think it can't work in development mode with HMR and HDR, can it?

[hi-ogawa]

FYI, I'm attempting a fix in #7892, which mostly does the same thing as cp ... but does it inside vite plugin.

This solution seems okay for the production build but I think it can't work in development mode with HMR and HDR, can it?

I don't think this specific issues are relevant for dev since vite serves asset files directly without moving or renaming asset file with hash etc...

But, looking at your case, the usage of ./stylesheet.css?url might have a different issue with vite #7786, so ssrEmitAssets will not probably solve that part of a problem.

[markdalgleish]

This is fixed by #7892.

Since you're using .css?url imports, you should also be running Vite v5.1.0-beta.0 or later (currently at v5.1.0-beta.6) and setting build.cssMinify to true in your Vite config. This setting will be enabled by default in the next release of the Remix Vite plugin.

[manzano78]

@markdalgleish, despite the latest version of Vite (v5.1.1), the latest Remix nightly (v0.0.0-nightly-4111fd1-20240210) and build.cssMinify to true, I can still reproduce this issue. The CSS files which are only referenced server side with .css?url are not copied to the client assets. Should I open a new issue?