Create-react-app: 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:

:arrow_down_small: Running in dev: :beetle:

:arrow_down_small: Running after being built: :ok:

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 https://github.com/webpack-contrib/style-loader/issues/352

[cherouvim]

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

[bugzpodder]

@raRaRa @jacargentina @sanzstez @primarius27 @Rogdham
Can you confirm whether this issue is dev only (yarn/npm start) or does it affect production as well?
Also if you can comment on the CSS solution you are using (CSS/CSS modules/Sass/Sass modules/Css in JS/inline styles) that would be great.

I think this issue is related to https://github.com/gatsbyjs/gatsby/issues/6211. It seem to have caused by turning on source maps in css-loader in development.

[Rogdham]

Can you confirm whether this issue is dev only (yarn/npm start) or does it affect production as well?

dev only, does not affect production

Also if you can comment on the CSS solution you are using (CSS/CSS modules/Sass/Sass modules/Css in JS/inline styles)

CSS (https://gist.github.com/Rogdham/1a19d9871612bf7145f92cb62138e8fc)

[raRaRa]

@bugzpodder
The bug is only present in development, and is likely related to source maps being enabled in style-loader.
I'm using SCSS modules.

[sanzstez]

@raRaRa @jacargentina @sanzstez @primarius27 @Rogdham
Can you confirm whether this issue is dev only (yarn/npm start) or does it affect production as well?
Also if you can comment on the CSS solution you are using (CSS/CSS modules/Sass/Sass modules/Css in JS/inline styles) that would be great.

I think this issue is related to gatsbyjs/gatsby#6211. It seem to have caused by turning on source maps in css-loader in development.

DEV only. prod build is OK

[sorahn]

I’m using styled-components and seeing the same thing.

[guylepage3]

+1

[guylepage3]

If it helps.. I downgraded to v2.1.3 and issue is resolved.

[johnbowdenatfacet]

+1 not working in 2.1.5, 2.1.3 is ok.

[sorahn]

Would it be possible to back out the sass source maps change for investigation when you bump the version for Jest 24 (https://github.com/facebook/create-react-app/pull/6278). I would like to upgrade to remove the npm audit warnings, but I don't want to be stuck with the FOUC.

[bugzpodder]

@sorahn this issue will likely be addressed sooner (before Jest 24).

[ZechyW]

If you don't want to downgrade to 2.1.3, a hacky workaround for now is to simply wrap the main ReactDOM.render() function in a short timeout when in dev mode (from https://stackoverflow.com/questions/36453826/how-to-stop-fouc-when-using-css-loaded-by-webpack); the timeout can be easily removed when the issue is resolved.

function mainRender() {
  ReactDOM.render(<App />, document.getElementById("root"));
}

if (process.env.NODE_ENV !== "production") {
  // Workaround for https://github.com/facebook/create-react-app/issues/6399
  // until it gets fixed upstream
  setTimeout(() => {
    mainRender();
  }, 1000);
} else {
  mainRender();
}

[nsafai]

The solution for me, as many mentioned above, was to downgrade to 2.1.3 using:

• yarn add [email protected]
• delete node_modules/ folder
• re-install dependencies using yarn

[mdluo]

So the solution is either go back to 2.1.3 or update local script as #6472 and wait for 2.16

[duola8789]

still not working in 2.1.5

[sorahn]

@duola8789 it will always be broken in 2.1.5. If you need it working today, downgrade to 2.1.3. If you can wait, wait for 2.1.6.