ssr build / use client / broken global CSS import from package

[aheissenberger]

Problem:
The imported CSS from a package or normal CSS file is in the production build but not loaded in the browser.

Example:

'use client';
import "@measured/puck/puck.css";

or

'use client';
import "./puck.css";

• pnpm waku dev 👍 - CSS is loaded
• pnpm waku dev --with-ssr 👍 - CSS is loaded
• pnpm waku build --with-ssr 👍
• pnpm waku start --with-ssr 👎 - imported CSS is missing

No problem, if the import is in a server component above the client component in the tree!

[dai-shi]

Thanks for reporting!

This is probably hard, and we probably need to mix hoistable elements and vite css bundling. (Or, I'm not sure. 🤔 Why is dev working...

Can you try pnpm waku build and pnpm waku start? Should it fail too?

[aheissenberger]

Can you try pnpm waku build and pnpm waku start? Should it fail too?
without SSR I get the same result

same result - CSS not loaded in the browser

I checked the files in the dist/public/assets folder (build with and without SSR) - the dist/public/assets/rsc4-6d73ab79e-KsjFJjAL.css does contain the needed CSS.

The CSS is not loaded in the browser.

I would not give this problem a high priority as there is currently a simple fix by loading global CSS in a server component in the tree above the client side component.

[dai-shi]

I would not give this problem a high priority as there is currently a simple fix by loading global CSS in a server component in the tree above the client side component.

Thanks for the note.

[dai-shi]

Why is dev working...

Ah, because Vite sends the css module through WebSocket.

I think I'd leave this issue for @Aslemammad.

[Aslemammad]

Could you please assign me?

[Aslemammad]

@aheissenberger #549 should fix this.

[aheissenberger]

@aheissenberger #549 should fix this.

@Aslemammad yes this fixed it!

[Aslemammad]

Thank you so much for the update!

[Aslemammad]

#658 fixes this and it will be in v0.20.1!

[dai-shi]

Closing this as resolved. Let us know if it's not.