CSS loaded with dynamic import() is leaky

[MichaelRoosz]

We use Vike with Vue3 and SSR.
Components are loaded async with Vue's "defineAsyncComponent()".

• After starting the server the CSS assets added by SSR are correct for the first request
• For the next request, both the current as well as the css assets from the previous request get added by Vike' SSR
• This continues until for every request all css assets of all components get added

This makes loading the components async pointless, since after every component has been loaded once by any request all future requests will always get all assets

How to fix this?

[lourot]

Hi @MichaelRoosz, thanks for raising this. I haven't seen this before. Can you push a minimal reproducer somewhere? Thanks!

[MichaelRoosz]

Hello @AurelienLourot ,

thank you for your response.

Here is a minimal example based on "npm init vike": https://github.com/MichaelRoosz/vike-app

The changes made you may find here: MichaelRoosz/vike-app@23a3ead

[brillout]

"retrieveAssetsDev()" / "retrieveAssetsProd()"

Indeed, manually removing the dynamic imports from there solves the issue. I guess Vike shouldn't include dynamic imports, let me fix this.

[brillout]

Hm, there doesn't seem to be a way to distinguish a normal import from a dynamic import in Vite's module graph. Maybe you'll have more luck finding a way to tell the difference: see the collectCss() method called by retrieveAssetsDev().

[brillout]

I can have another look at it sometime next week. (Feel free to ping me if I forget.)

Maybe you'll have more luck finding a way to tell the difference: see the collectCss() method called by retrieveAssetsDev().

It would be a huge help, let me know if you find something.

[MichaelRoosz]

After some more debugging, I think we should still add css assets from dynamic imports (not adding them would be a big problem in my setup), but we should check if they belong to a component that has been loaded for the current vue.js app - I think this should be possible, but I am still working on a proof of concept. Once I have something working I will open a pull request.

[brillout]

@MichaelRoosz Neat, looking forward to it 👀 (on my side my main blocker was that I couldn't find a way to distinguish a normal import from a dynamic import in Vite's module graph). Keep me udpated how things go (even if it doesn't result in a PR).

[josetr]

I'm experiencing the same problem using React

If I import "globals1.css" on page1/+Page.tsx, and then navigate using client routing to page2/+Page.tsx that imports "globals2.css", the css from globals1.css will still affect page 2.

Also, just hovering over the page 2 link will prefetch it's global css, affecting the current page 1.

Also, while on dev mode, once a css asset has been loaded, it will remain there until I restart the server. F5 isn't enough.

[brillout]

See https://vike.dev/faq#why-is-css-leaked-to-other-pages.

the same problem

OP's issue is around CSS loaded over dynamic import().

[josetr]

I see. I thought Vike would allow something similar to https://nextjs.org/docs/app/building-your-application/styling/css-modules#global-styles, where global styles can be imported into any layout, page, or component inside the app directory, unlike pages router, where global styles were only allowed in a single place: _app.tsx.

"Why is CSS leaked to other pages?"
In a nutshell: CSS is leaky.

Doesn't sound right.

In a nutshell: this is the behavior that we decided to have is probably more accurate.

Vike knows which CSS files to inject to a page, so I don't see a reason why it should be complicated to remove them before navigating to another page.

FOUC can be a bit annoying, but if it's necessary, it's better than mixing global styles.

[brillout]

It isn't that simple. Anyways, I don't see the current situation to be a blocker for users.

[brillout]

Doesn't sound right.

0f2e5f0

[brillout]

I further improved https://vike.dev/faq#why-is-css-leaked-to-other-pages. It should clearer.