emotion: Nextjs SSR sometimes not rendering styles

emotion 10.0.7:
react 16.8.0:

Relevant code: All the project styles are styled components.

export const Span = styled.span`
  color: white;
  background: black;
`;

What you did: Server-side rendered the project, including styles.

What happened: Eventually the SSR stops returning any styles, causing a whole-page FOUC.

Reproduction: This is a minimal reproduction of the codebase: https://codesandbox.io/s/5xx25mvv1p

Problem description: At first everything works fine. Style tags are rendered inline, as siblings, on the server and then moved to the head on client-side re-render. The problem is that eventually the SSR stops returning any styles, causing whole-page FOUC. Unfortunately, the code-base I provided does not replicate this issue, because I can’t consistently get it to happen, and haven’t been able to track down any specific contributing factor. We have several projects, structured this same way, and since the update to emotion 10, all are having this FOUC issue at various points. However Next and React were also updated around the same time so these could definitely be factors or even the cause. One note is the global styles seem to be consistently returning, just not the styled components.

Suggested solution: The styles consistently return.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 15 (4 by maintainers)

Most upvoted comments

I’d love to help with fixing your problem - but no exact repro case was given and without such, I cannot do much.

Andarist on Oct 29, 2019

I’m going to close this then - assuming the issue could already have been fixed by OP. If not - please share repro steps, if you do that I will take a look at your problem shortly.

Andarist on Oct 31, 2019

@piotrblasiak the problem is that you are running this test in jest which by default runs in a browser-like environment (using JSDOM). So emotion thinks it’s used in a browser env and injects its styles into JSDOM’s document.head.

If you add /** @jest-environment node */ to this file then your returned html will be equal to what you expect it to:

<style data-emotion-css="b5zacb-html">.css-b5zacb-html{color:red;}</style><div class="css-b5zacb-html">test</div>

Andarist on Mar 21, 2020

I was having this problem with next@8.1.0 (props.theme was always {} in server render, but fine in-browser). Downgraded to next@8.0.4 and it works again, full theme is available in props.theme.

I believe that require('emotion-theming') was resolving to a different module id depending on the environment, as described in this issue https://github.com/zeit/next.js/issues/7109, so essentially Consumer wasn’t from the exact same module as Provider, so it fell back to the default {} theme. May be because emotion-theming builds as both cjs and mjs versions. FWIW my problem is also fixed on the latest @next version which was next@8.1.1-canary.51 at time of writing

grrowl on Jun 12, 2019

I’m having the same issues as @SimplyComplexable. I’m using:

emotion 10.0.7:
react 16.8.1:

jsfowles on Apr 1, 2019