FOUC: Warning: Text content did not match. Server: "...css..." #3108
Description
Getting large error (printing all of CSS used in <style jsx global>) in web console.
Warning: Text content did not match. Server: "
...(css)...
I think this is causing FOUC, so there is a flash of unstyled content followed by a second later the actual styles.
This is coming from a library being used in a next project (from #3088).
- I have searched the issues of this repository and believe that this is not a duplicate.
Expected Behavior
- Styles should be applied from server directly.
- There should be no FOUC
- There should be no error in web console
Current Behavior
To elaborate a little more, when rendering a next app in the library itself (so some page in that repo), the styles render fine. View-source shows source maps and minified CSS in the HTML markup.
However, when using that same code as a compiled project loaded into a separate next app, the markup in view-source shows unminified CSS and no source maps (and we get the web console error and fouc).
Steps to Reproduce (for bugs)
- See ModuleParseError when referencing external repo #3088 for setup.
- I am manually compiling some files in repo-b using
babel <folder> --out-dir ... etc., and then importing that and also importingbabel-polyfillif that matters.
Context
This is just unexpected behavior making the app not look right (ux).
Your Environment
| Tech | Version |
|---|---|
| next | 4beta2 |
| node | 8.4 |