question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

image

Reproducible Demo

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:34
  • Comments:26 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
mrmckebcommented, Feb 13, 2019

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.

3reactions
sorahncommented, Mar 1, 2019

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

481122 - Allow the page to render before <link> tags in body
In the test above, the page has inline CSS, 'defer'd javascript, then the HTML for the top toolbar. After the toolbar, there's a...
Read more >
before - CSS: Cascading Style Sheets - MDN Web Docs
It is often used to add cosmetic content to an element with the content property. It is inline by default. Try it. HTML...
Read more >
Refused to apply inline style because it violates the ...
I made some changes, and as I didnt liked I deleted them, and now my extension is throwing error: Refused to apply inline...
Read more >
Avoid using inline css styles
We cannot use css selectors while writing inline styles. Selectors like before , after , hover , focus etc are very much useful...
Read more >
WebView
If WebView has already been loaded into the current process this method will ... Enables debugging of web contents (HTML / CSS /...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found