flash of unstyled content with css styles inside a SFC

[n4an]

I put styles for each component inside it (SFC), and with nuxt-edge+ nuxt/bridge when refresh page it is shown without styles and after second it is applied.
Was ok prior

[n4an]

or may be this is applied too late

css: ['~/static/css/styles.css'],

[danielroe]

@Mitch-i Would you provide a reproduction, please - and the other info we ask for in a new issue template on this repo? (I know you filed it elsewhere originally!)

[antfu]

If you are using vite mode, keep track on nuxt/vite#211

[nathanchase]

I've been seeing the same (FOUC) when using the css property of nuxt.config.js when using nuxt-edge+ nuxt/bridge.

[atinux]

Is this still an issue?

[morinokami]

Hi, I have a similar problem (though I'm not using Nuxt Bridge).

When I'm using components from pages inside app.vue, they don't have styles on the first load. Here's the repository I created for reproduction:

https://github.com/morinokami/nuxt3-fouc-repro

And here's a screenshot demonstrating the problem (the word "test" at the upper left doesn't have styles on the first view, but the NuxtWelcome component does):

My environment:

• Operating System: Linux
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-27296423.f3082ca
• Package Manager: npm@8.1.4
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

[xxSkyy]

Hi, I have a similar problem (though I'm not using Nuxt Bridge).

When I'm using components from pages inside app.vue, they don't have styles on the first load. Here's the repository I created for reproduction:

https://github.com/morinokami/nuxt3-fouc-repro

And here's a screenshot demonstrating the problem (the word "test" at the upper left doesn't have styles on the first view, but the NuxtWelcome component does):

My environment:

* Operating System: `Linux`

* Node Version:     `v16.13.0`

* Nuxt Version:     `3.0.0-27296423.f3082ca`

* Package Manager:  `npm@8.1.4`

* Bundler:          `Vite`

* User Config:      `-`

* Runtime Modules:  `-`

* Build Modules:    `-`

I've had this problem in nuxt3, upgraded to latest nuxt3 version and it disappeared, give it a try

[xxSkyy]

I've also noticed it while updating one of my projects from nuxt2 to nuxt-bridge.

I've investigated it a bit more and it seems like only part of css are passed from SSR, and other aren't just there.

I've made also quick repro here and live demo

Just refresh and see unloaded classes for split second at the center.
Also background and some class got compiled if you'll check page source

[CarsonBain]

+1 for this. Upgraded a nuxt 2 project to bridge and seeing a flash of unstyled content in dev and also after using build and start to serve the production build.

Here's a quick code sandbox. On the sandbox it appears that the error only happens every few refreshes, but on my project (maybe due to more css), it's happening every refresh: https://codesandbox.io/s/nameless-http-vcxw98?file=/package.json. Can't seem to figure out how to get codesandbox to allow me to run the project in production mode, but hopefully this is enough information! Let me know if I can provide anything else.

Flash of unstyled content - Watch Video

[n4an]

i some how resolved the problem, I not remember how, may be with

  // build: {
  //   optimization: {
  //     runtimeChunk: true,
  //     splitChunks: {
  //       maxSize: 240000,
  //       name: true,
  //       cacheGroups: {
  //         styles: {
  //           name: 'styles',
  //           test: /\.(css|vue)$/,
  //           chunks: 'all',
  //           enforce: true
  //         }
  //       }
  //     }
  //   }
  // },

[danielroe]

Let's follow in #26.