SSR Flash of unstyled content (FOUC) - Using a component library on multiple places

[Evertvdw]

What happened?

I am working on a component library to use in my project but I'm running into an issue that the styling of components in this library is not present in the initial SSR response. The css style imports that belong to these components are not included when the component is used on multiple places in the project.

I have managed to create a minimal reproduction of this issue. I think it has something to do with how the quasar.manifest.json is created on build time. The proper references in there don't seem to exist in this case.

NOTE: The @mett/design-system is a private package hosted on a private repo. For the reproduction I hosted a separate repo for this, so the .npmrc file is crucial for being able to install this package.

NOTE2: In the quasar.config.js I have added the @mett/design-system to the noExternal list in the ssr config. This is necessary to prevent .css file load errors.

What did you expect to happen?

The styles should aways be included in the initial SSR response, so that users wont see a flash of unstyled content.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-dnumdghm?file=src%2Fpages%2FIndexPage.vue

How to reproduce?

1. Open the reproduction link
2. Stackblitz is configured to run build && start, running the production build
3. Open the preview in a separate tab
4. Disable javascript in that tab (Run command > Disable Javascript)
5. Refresh the page

The issue is not there when 'TestPage.vue' is commented out in 'routes.js'.

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

SSR Mode

Platforms/Browsers

No response

Quasar info output

Operating System - Linux(5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36) - linux/x64
NodeJs - 20.19.1

Global packages
  NPM - 10.8.2
  yarn - 1.22.19
  pnpm - 8.15.6
  bun - Not installed
  @quasar/cli - undefined
  @quasar/icongenie - Not installed
  cordova - Not installed

Important local packages
  quasar - 2.18.5 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 2.4.0 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.17 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.5.24 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.5.0
  pinia - Not installed
  vite - 7.2.0 -- Native-ESM powered web dev build tool
  vite-plugin-checker - Not installed
  eslint - 9.21.0 -- An AST-based pattern checker for JavaScript.
  esbuild - 0.25.0 -- The cross-platform WebAssembly binary for esbuild, a JavaScript bundler.
  typescript - Not installed
  workbox-build - Not installed
  register-service-worker - Not installed
  electron - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  @capacitor/core - Not installed
  @capacitor/cli - Not installed
  @capacitor/android - Not installed
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - quasarframeworkstackblitztempl-u2q1
  en0 - 192.168.1.104

Relevant log output

Additional context

No response

[Evertvdw]

@rstoenescu I have found another SSR issue regarding to styles, similar to #17864. Just tagging you directly as this is probably something for you. I have done my best to make the reproduction as minimal as possible.

[Evertvdw]

I also have setup the same example on a Nuxt project where this issue is not present: https://stackblitz.com/edit/github-xuh2fkfn?file=app%2Fpages%2Findex.vue

[Evertvdw]

Did some more digging, I came across this issue: vitejs/vite#15161. Suggesting it is something changed from Vite 4 > 5. See also: https://v5.vite.dev/guide/migration#corresponding-css-files-are-not-listed-as-top-level-entry-in-manifest-json-file

EDIT: I tried to use Vite 4 in the stackblitz example code but I still had the issue using Vite 4 so it does not seem related. Also tried setting build.ssrEmitAssets to true, but that did not have an effect either.