Flash of unstyled content (FOUC) with Nuxt 3、Vite

Environment

• Operating System: Darwin
• Node Version: v14.16.1
• Nuxt Version: 3.0.0-27303148.ac98373
• Package Manager: yarn@1.22.5
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

Mini Repo : https://github.com/webfansplz/nuxt3-fouc-repo/tree/main

Describe the bug

After building it with yarn build (nuxt build) and starting the server with yarn start (node .output/server/index.mjs) we still get a flash of unstyled content on load.

This problem also existed in develop mode .

The FOUC leads to very annoying developer experience and user experience . 💔

Additional context

No response

Logs

No response

[antfu]

• https://github.com/nuxt-contrib/vue-bundle-renderer/pull/21
• https://github.com/nuxt/framework/pull/2227

[webfansplz]

I have the same preset as author and I got flashing effect on my main page. I added in nuxt.config.ts

build: {
    extractCSS: true
}

and the effect gone. Did I make it right way? 🤷🏻

This is only applied in webpack.