Nuxt.js: css flash problem

[ummo]

I updated nuxt to the lastest version and found a new problem, my page flash for one second after page refresh, it seems like css is not loaded before page render, but css is already existed before html tags.

_{This bug report is available on Nuxt.js community (#c1477)}

[moldray]

I have the same problem in rc11

[NicoPennec]

@ummo @moldray

It's due to Webpack HMR (in dev mode only)

Read the FAQ 😉

https://nuxtjs.org/faq/css-flash

[ummo]

@NicoPennec
There is no HMR, I use express server and nuxt as middleware, css flash does exist.
Try your nuxt-express demo.

[moldray]

@NicoPennec

I know the case you refered. but the problem i met is something different. my app runs well yesterday. when i upgrade nuxt to rc11 the problem come out.

of course， i modified some code, but i am uncertain what cause this. what i found until now is that the js loaded different from before.

right case：

error case：

in the end, forgive my poor english

thank you!

[moldray]

i rollback nuxt, but it is not work. i guess it is relevant to "prefetch" or "preload".

[moldray]

I talked with @ummo and found that nuxt depended webpack has upgrade. may this be useful.

PS: I use nuxt as middleware of koa2

[vadimsg]

We use express with nuxt and now we have also a flashing style problem in dev and in prod.

[bimohxh]

nuxt page flash is always exist, I not resolve this untill now

[wargt]

i have css flash problem in prod mode. I use 1.0.0-rc11 and express middleware
link

pls help

[f15gdsy]

Have the same issue here.
I'm using Nuxt starter template and Nuxt rc-11, and in production mode, but the CSS flash exists even when extractCSS set to true.

I had other projects running on older version of Nuxt: alpha.3 and alpha.4 and rc-9, and they works great in production and dev mode.

[f15gdsy]

Rolling back to rc 9 fixed the problem.

[christophwolff]

i have the same issue. Please solve. Thank you!

[christophwolff]

I rolled back to rc9. CSS Flash still happens.

[bimohxh]

It‘s not the nuxt version, every version has this problem

[christophwolff]

@bimohxh i fixed it by creating a new stater project with vue-cli and copying all my files over. Now it works.

[ummo]

@NicoPennec
I get stuck because this issue, do you have any plan to fix it?

[christophwolff]

@ummo create a new project bring all your files and config over. Should work then. I have no idea why. Should be fixed, yes.

[homerjam]

Rolling back to rc9 worked for me. I looked back through the commits since then and couldn't spot anything obvious though, planning to look further into it when I can.

[matthew-dean]

@NicoPennec This isn't because of HMR. This also happens when running nuxt generate. The link / style tags or whatever one would expect to prevent this are not generated in <head/>.

[matthew-dean]

Based on the suggestion, I rolled back to RC9 and ran nuxt generate again. This time, inline style blocks were injected into all my generated HTML pages and I had no FOUC (Flash of Unstyled Content). So definitely a major bug was introduced before RC9 and RC11. Please fix this!

[valeriosillari]

i am newbie to nuxt.js but i also facing this problem.
checking on vue.js official documentation and find v-cloak option:
https://vuejs.org/v2/api/#v-cloak

nobody is talking about it, it could be useful or I am just probably checking on the wrong direction?

[rlam3]

Has anybody found out what the problem is? I'm getting this annoying error of refreshing and loading the page where the css is not appearing... Thanks!

Something really doesn't seem right... I tried rc8 rc9 and they don't work either. Along with rc11.
Tested all the way to rc3 and same issue in both prod and dev.

After going to changing to another page, and refreshing, the css is gone. The only page that is consistent with the css is that of the index.vue.

@pi0 @alexchopin @Atinux Thank you so much for putting this framework together! We totally understand that you guys are busy with your own things. But we as the community would love your input on this matter. Again Thanks!

[mnishihan]

Looks like it's not an issue of nuxt itself. Instead, in my finding, it is an issue of nuxt dependencies, such as vue, vue-server-renderer, vue-style-loader or vue-template-compiler etc.

So, if you have 2.4.3 version of vue, vue-server-renderer or vue-template-compiler installed as dependencies of [email protected], when you upgraded nuxt, you might experience this FOUC issue, as I did in my case.

I've fixed this issue in my existing workspace, by executing following commands:

yarn remove nuxt
yarn add nuxt

If you are using npm for package installation, instead of yarn, the above commands would be:

npm remove nuxt
npm install nuxt

Above commands will reinstall latest version of nuxt (i.e. version 1.0.0-rc11) along with latest versions of dependencies (i.e [email protected], [email protected], [email protected] etc) and that fixes this issue.

[gwildu]

In my case what solved the issue is to specify the nuxt version in package.json explicitly to rc11 like: "nuxt": "1.0.0-rc11", that forced yarn / npm to install the correct version and the correct dependencies. with "nuxt": "^1.0.0-rc11", i got rc9 installed with vue 2.4.4 and vue-server-renderer 2.4.3.
Both node and yarn do not take care about the increase in the pre-release part of the version so I would say the proper way to version a pre-1 version would be to use 0.x.x which is actually also the recommendation of semver (http://semver.org/#spec-item-4). A pre-release version in my opinion should never end up as result of a generator as it might lead to this inconsitent behavior. As soon as version 1 is released, the prerease versioning can be used again as there is already a stable major version around to use in the generator like "^1.x.x".
So I would say it is an issue of the generator and the way how nuxt is currently versioned. Or it should be documented clearly how and that you should upgrade to a higher pre-release version, because most people don't even realize that a pre-release version was installed.

[mnishihan]

@gwildu in broader sense, yes it's nuxt versioning issue and I fully agree with what you said.

But anyway, I was just saying that, the sudden FOUC after nuxt upgrade is actually not caused due to changes in nuxt code. Instead, it was nuxt dependencies, that causes functionally to break in nuxt, as nuxt is essentially a wrapper over other libraries.

IMHO, what nuxt developers can/should do is define explicit versions of dependencies in nuxt's package.json (that they're developing & testing with), instead of allowing a range of even minor or patch versions to be different in different installations. That way, lots of dependency related issues like issues will disappear.

[rlam3]

@mnishihan Maybe we could start like a markdown table of which packages break or work with which versions? But this would require a lot of testing.

[gwildu]

@mnishihan I agree, if, e.g., vue-server-renderer and vue needs to have the exact same version to be able to work together I think explicit versions is the only way to avoid such issues. Not all dependencies have that restrictions, usually such cross-module dependencies should be avoided, but if there are some of them, they should be handled explicitly. It might be a bit of manual work to do when updating to a new version but it probably will save time in answering such issues like this one.

[Atinux]

#1652

[DaftMonk]

I was experiencing this issue because we are using a custom app.html file, and we were missing {{ HEAD }} from our template.

[1hakr]

I believe this issue still exist when extractCSS is enabled and all css is extracted along with critical css in separate files. extractCSS is not working as intended. Can anyone else confirm this?

[galvez]

Closing this as there's been no updates over 90 days.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.