FOUC - JS chunks rendered before CSS has loaded, on development, references blobs instead of inline style

[raRaRa]

Is this a bug report?

Yes (I think so!), only on development, not production.

Did you try recovering your dependencies?

Yes. Running yarn version 1.13.0

Which terms did you search for in User Guide?

Stylesheets, sass, css, code splitting and modules

Environment

Environment:
OS: Windows 10
Node: 8.11.1
Yarn: 1.13.0
npm: 6.4.1
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.8.1 => 16.8.1
react-dom: ^16.8.1 => 16.8.1
react-scripts: ^2.1.4 => 2.1.4

Steps to Reproduce

I tried to re-produce this on CodeSandbox without any luck. I never managed to get those blob CSS references in the head tag.

Expected Behavior

I expected the CSS blob to load completely before the chunk starts rendering.

Actual Behavior

I see the component rendered without any stylesheets for a second or two. It seems to be related to stylesheets being loaded over blobs instead of style. I suspect it might be style-loader.

Reproducible Demo

I tried without any luck. All references to CSS are done by adding style to the head tag on my CodeSandbox demo.

[primarius27]

Experienced the same bug after I updated react-scripts from 2.1.2 to 2.1.4.

[jacargentina]

Same here, very ugly effect

[raRaRa]

It happened to me after upgrading from 2.1.3 to 2.1.4, and the strange thing is that I still have the issue if I downgrade to 2.1.3. I'm wondering if it's related to some dependency that got updated after deleting yarn.lock and node_modules.

I've also tried upgrading to version 2.1.5

[jacargentina]

@raRaRa can you add the suffix (FOUC) on the issue title please? It can help others having this to reach here.

[sanzstez]

+1. Same issue at Mac OS with CRA 2.14 and 2.1.5.
Show unstyled html before css apply for ~ 1 sec.

[mrmckeb]

Hi all, sorry about this. If you want to revert to 2.1.3 in the interim, I think that would be the safest. We'll look into this and try to get a fix out ASAP.

[Rogdham]

I have a similar problem that may be related, and I'm confirming the issue is present in 2.1.4 but not in 2.1.3.

I've put the content of the src dir from a fresh CRA on gist to illustrate:

🔽 Running in dev: 🪲

🔽 Running after being built: 🆗

Hope this helps to reproduce!

[raRaRa]

@Rogdham Can you confirm that the styles are being referenced as blobs in the head tag in 2.1.4, but not in 2.1.3?

I believe this issue is related to https://github.com/webpack-contrib/style-loader - they seem to generate blobs under certain circumstances.

[Rogdham]

@Rogdham Can you confirm that the styles are being referenced as blobs in the head tag in 2.1.4, but not in 2.1.3?

Yes, I'm confirming.

On 2.1.4:

On 2.1.3:

[raRaRa]

I don't know if this helps, but on style-loader they say:

ℹ️ Source maps and assets referenced with url: when style loader is used with { options: { sourceMap: true } } option, the CSS modules will be generated as Blobs,

Seems to be related to webpack-contrib/style-loader#352

[cherouvim]

Confirming bug, as well, when updated from 2.1.3 to 2.1.4 and FOUC only visible on development mode.