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.

[gatsby-plugin-styled-components]: Plugin not working properly with styled components v5 with SSR

See original GitHub issue

Description

Using the newest version of gatsby-plugin-styled-components@3.3.2 with styled-components@5.1.0 (any 5.x version) renders no CSS created with createGlobalStyles to the <head>. It works only with JavaScript enabled. I upgraded from styled-components@4.4.1 with the same plugin version and it stopped working.

Steps to reproduce

Repository to reproducible demo. Two branches:

styled-components-4.4.1 (working)
styled-components-5.1.0 (not working)

Checkout branches and run yarn build && yarn serve.

More details

I’m using wrapRootElement to add the ThemeProvider, Normalize and my GlobalStyles.

/** gatsby-ssr.js */
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { Normalize } from 'styled-normalize';

import { GlobalStyles } from './src/components/layout';
import { lightTheme } from './src/themes';

export const wrapRootElement = ({ element }) => (
  <ThemeProvider theme={lightTheme}>
    <Normalize />
    <GlobalStyles />
    {element}
  </ThemeProvider>
);

I’m adding some CSS inside the createGlobalStyle method and also additionally load two external CSS Stylesheets at the end. The only CSS appearing in the <head> of the SSR html is the one from the two statically included files. All other styles disappear.

/** global-styles.ts */
import { createGlobalStyle } from 'styled-components';

import { ThemeType, ThemeProps } from '../../typings/theme';
import { lightColors, darkColors } from '../../themes/tokens/colors';

import globalCSS from './styles/global.css';
import highlightCodeLine from './styles/highlight-code-line.css';

export const GlobalStyles = createGlobalStyle<{
  theme: ThemeType & ThemeProps;
}>`
  /* ↓ All these styles disappear */
  .light {
    --colorBackground: ${lightColors.background};
    --colorText: ${lightColors.text};
  }

  .dark {
    --colorBackground: ${darkColors.background};
    --colorText: ${darkColors.text};
  }

  /* ↓ The imported CSS of these files is still there */
  ${globalCSS}
  ${highlightCodeLine}
`;

Expected result

What should happen?

A <style> tag holding all styles of styled-components should be in the <head> after SSR is completed:

<style data-styled="xoFJR bLdpD …" data-styled-version="4.4.1">
/* a lot of CSS styles */
</style>

styled-components-4 4 1

Actual result

<style data-styled data-styled-version="5.1.0">
/* only a fraction of the CSS appears, only the one from static CSS files imported. */
</style>

styled-components-5 1 0

Environment

  System:
    OS: macOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
    Yarn: 1.19.0 - ~/.yarn/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v11.12.0/bin/npm
  Languages:
    Python: 3.6.1 - /Users/stefan.imhoff/.pyenv/shims/python
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: 72.0.2
    Safari: 13.1
  npmPackages:
    gatsby: ^2.20.29 => 2.20.29 
    gatsby-image: ^2.3.4 => 2.3.4 
    gatsby-plugin-manifest: ^2.3.6 => 2.3.6 
    gatsby-plugin-mdx: ^1.1.10 => 1.1.10 
    gatsby-plugin-offline: ^3.1.4 => 3.1.4 
    gatsby-plugin-react-helmet: ^3.2.4 => 3.2.4 
    gatsby-plugin-sharp: ^2.5.6 => 2.5.6 
    gatsby-plugin-styled-components: ^3.3.2 => 3.3.2 
    gatsby-plugin-typescript: ^2.3.3 => 2.3.3 
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4 
    gatsby-remark-acronyms: ^1.1.0 => 1.1.0 
    gatsby-remark-autolink-headers: ^2.2.3 => 2.2.3 
    gatsby-remark-copy-linked-files: ^2.2.3 => 2.2.3 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^3.2.5 => 3.2.5 
    gatsby-remark-numbered-footnotes: ^1.0.1 => 1.0.1 
    gatsby-remark-reading-time: ^1.1.0 => 1.1.0 
    gatsby-remark-responsive-iframe: ^2.3.3 => 2.3.3 
    gatsby-remark-smartypants: ^2.2.3 => 2.2.3 
    gatsby-remark-unwrap-images: ^1.0.2 => 1.0.2 
    gatsby-remark-vscode: ^2.0.3 => 2.0.3 
    gatsby-source-filesystem: ^2.2.4 => 2.2.4 
    gatsby-transformer-json: ^2.3.3 => 2.3.3 
    gatsby-transformer-sharp: ^2.4.6 => 2.4.6 
    gatsby-transformer-yaml: ^2.3.3 => 2.3.3 
  npmGlobalPackages:
    gatsby-cli: 2.8.29

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:14 (2 by maintainers)

Top GitHub Comments

3reactions

johncalvinrobertscommented, May 29, 2020

FYI – faced this same issue today, resolved by using wrapPageElement instead of wrapRootElement. Layout-related CSS should go in wrapPageElement, global state-y stuff should go in wrapRootElement. This is inferred based on the example in the docs, so don’t take my word for it.

I validated locally with your repo @kogakure

Not sure if this is indeed a bug or expected behavior of the plugin.

0reactions

jocelinqueaucommented, Sep 23, 2021

Anyway, would there be somewhere to look for, as for why i still have a FOUC in production but not in development ? ( the code for gatsby-browser and gatsby-ssr is the same)

Top Results From Across the Web

I finally fixed my Styled-Components in gatsby.js

The fix. The fix was so simple it was only 2 lines total. One to install gatsby-plugin-styled-components and one to use it.

Fixing styled-components server-side-rendering issues in ...

My Problem ⚠️. In the development environment everything was working fine, but after building the Gatsby site, an annoying flickering ...

Troubleshooting Common Errors - Gatsby

Problems with the cache; Errors with common plugin configurations. Installing plugins for styling results in Generating SSR bundle failed; Issues with fs ...

Globally Style the Gatsby Default Starter with ... - Scott Spence

Configure gatsby-plugin-styled-components and createGlobalStyle ... Now I'm going to create a global-style.js file in a new directory src/theme ...

How to solve CSS loading delay with Gatsby | Eight Bites

You can solve this problem by installing plugins or properly load CSS ... This plugin helps Gatsby to handle styled components on SSR....