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.

[Andarist]

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

[Andarist]

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.