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.
How to fix FOUC in dev mode?
See original GitHub issueI’m seeing a FOUC (flash of unstyled content) in dev mode (yarn start). Normally this would be fine, but I need to calculate the widths of some elements as soon as they’re mounted. If the CSS hasn’t been loaded yet, this number comes out wrong.
How can I force the <link rel="stylesheet" href="/assets/css/style.xxx.css"/> tag to appear even in dev mode?
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
Flash of unstyled content in dev mode · Issue #915 · sveltejs/kit
The easy fix would be to just add .scss and whatever else to the list of extensions it recognises, though that feels like...
Read more >Fixing Flash of Unstyled Content (FOUC) in your Webpack 4 ...
The fix to the FOUC was to include a Webpack Plugin called Extract Text Loader. This plugin basically extracts all the css that...
Read more >What the FOUC is happening: Flash of Unstyled Content
The rest of his article focuses on how to mitigate FOUC specifically for browsers that implement web engines, and for the typical web...
Read more >How to stop FOUC when using css loaded by webpack
Simplest solution. This can be done conditionally for development mode only. – Shubham Kanodia. May 30, 2017 at 10:56.
Read more >Simplify DevTools using Focus Mode - Microsoft Edge ...
Use the Detached Elements tool in the Microsoft Edge DevTools to find and fix DOM memory leaks. About the list of tools -...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Nope, it doesn’t hot-load in SSR. The purpose of :8081 is to mimic the server, but without minifying/optimising code, and with full source map support. The server automatically restarts on code changes, too.
Ah shoot. Sorry, I didn’t even notice that. That doesn’t do hot-reloading though does it? Ideally the full page would be served initially, and then patched thereafter. Regardless though, that should be good enough for my needs. I can press refresh on this one specific page.
I’m getting all kinds of issues on Windows right now. WDS seems to be locking all my files so I can’t actually edit them when it’s running anymore. I had this problem with ReactQL before, but it was working fine yesterday, and now it’s not again. Anyway, I’ll figure something out. Thanks!