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

kogakure · 2020-05-22T11:33:48Z

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>

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>

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

The text was updated successfully, but these errors were encountered:

As the current version of gatsby-plugin-styled-components doesn’t seem to work with styled-components 5.x I needed to downgrade to get the SSR running again. Issue: gatsbyjs/gatsby#24341

johncalvinroberts · 2020-05-29T15:19:22Z

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.

LekoArts · 2020-06-18T08:18:11Z

The wrapPageElement API would be indeed the more correct API. Can you try using that and report back if your issue is resolved?

kogakure · 2020-06-19T17:25:16Z

I moved GlobalStyles and Normalize to wrapPageElement and styled-components rendered in 5.1.1 the styles into the DOM. Issue is fixed 👍

LekoArts · 2020-06-22T06:13:45Z

Awesome!

jocelinqueau · 2021-09-20T18:19:40Z

Hi sorry to bother, but i have a FOUC too. i had it before using wrapPageElement and now that i moved my global styles in wrapPageElement, i don't get those altogether. I tried the v4 but i have some error.
Here my repo https://github.com/jocelinqueau/portfolio2021final,
here is how it look now with wrapPageElement https://elegant-archimedes-313894.netlify.app/
and how it looked before https://6148b61e975faa0008296a7b--elegant-archimedes-313894.netlify.app/

i did look at kogakure commit kogakure/website-gatsby-stefanimhoff.de@9be078d but i can't succeed to make my style work

kogakure · 2021-09-20T20:26:12Z

@jocelinqueau Both examples throw errors. Without looking too deep into the code, try fixing this code in gatsby-browser.js and gatsby-ssr.js, it’s not valid JavaScript/React:

- export const wrapPageElement = ({element}) =>{
+ export const wrapPageElement = ({element}) =>(
	<>
	<Typographie />
	<GlobalStyles />
	{element}
	</>
-}
+);

jocelinqueau · 2021-09-20T22:44:58Z

@kogakure Yes, sorry about that. Thank for highlighting this for me.
( should i delete my message then or not ?)

kogakure · 2021-09-21T05:52:26Z

@jocelinqueau I’m glad I could help, keep the message, somebody else might learn from it. 👨‍💻

jocelinqueau · 2021-09-21T08:06:03Z

@kogakure, ok thanks. Just a last question, on development the styles is fine. But on production i still have a little FOUC. I did change the code accordingly to your indication (https://elegant-archimedes-313894.netlify.app/ , https://github.com/jocelinqueau/portfolio2021final). It is because of my bundle size ? do i need to do some optimization like lazy loading and minified css ? or it should do that ?

kogakure · 2021-09-21T09:36:26Z

When I follow your link, it doesn't look like FOUC, it throws still bugs in the terminal. FOUC would be only a short time before styles apply. Your site stays white/broken. Maybe use ESLint and Prettier to check all your code for errors.

jocelinqueau · 2021-09-21T12:01:20Z

thanks, i check my code and remove the errors. But the link i send you normally works, i checked with another device.
However i still get a FOUC, i even made a gif ( but the links are the same)
Here is it (i made it bad quality so it was lighter)

kogakure · 2021-09-21T14:34:13Z

OK, it works (when I disable adblocking by Brave). Maybe something to look into. Maybe you have some dependency on some ad tracking or script that throws an error when it’s blocked.

jocelinqueau · 2021-09-23T17:05:18Z

@kogakure i Will look into it, i weirdly have a cookie coming from a CDN for my images (cloudinary), and i asked them why for after googling about it with no real answer. But yeah it's weird others people have had reach my site without trouble

jocelinqueau · 2021-09-23T17:07:42Z

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)

layout 관련 css는 wrapPageElement에 넣어야 함 Ref) gatsbyjs/gatsby#24341

kogakure added the type: bug An issue or pull request relating to a bug in Gatsby label May 22, 2020

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label May 22, 2020

kogakure mentioned this issue May 22, 2020

fix(styled-components): downgrade to styled-components version 4.4.1 kogakure/website-gatsby-stefanimhoff.de#69

Merged

freiksenet added topic: styled-components* and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels May 22, 2020

freiksenet assigned LekoArts May 22, 2020

kogakure mentioned this issue Jun 1, 2020

Move Normalize and GlobalStyles to wrapPageElement kogakure/website-gatsby-stefanimhoff.de#84

Closed

LekoArts added the status: awaiting author response Additional information has been requested from the author label Jun 18, 2020

LekoArts closed this as completed Jun 22, 2020

LekoArts removed the status: awaiting author response Additional information has been requested from the author label Jun 22, 2020

LekoArts added the topic: plugins-styling Relates to the styling (e.g. CSS-in-JS, SASS, PostCSS) label May 28, 2021

reesekimm added a commit to reesekimm/blog.reesekimm.com that referenced this issue Sep 28, 2022

fix: ssr시 global style이 적용되지 않는 이슈 해결

df48912

layout 관련 css는 wrapPageElement에 넣어야 함 Ref) gatsbyjs/gatsby#24341

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kogakure commented May 22, 2020

johncalvinroberts commented May 29, 2020 •

edited

LekoArts commented Jun 18, 2020

kogakure commented Jun 19, 2020

LekoArts commented Jun 22, 2020

jocelinqueau commented Sep 20, 2021 •

edited

kogakure commented Sep 20, 2021

jocelinqueau commented Sep 20, 2021

kogakure commented Sep 21, 2021

jocelinqueau commented Sep 21, 2021

kogakure commented Sep 21, 2021

jocelinqueau commented Sep 21, 2021

kogakure commented Sep 21, 2021

jocelinqueau commented Sep 23, 2021 •

edited

jocelinqueau commented Sep 23, 2021

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

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

Comments

kogakure commented May 22, 2020

Description

Steps to reproduce

More details

Expected result

Actual result

Environment

johncalvinroberts commented May 29, 2020 • edited

LekoArts commented Jun 18, 2020

kogakure commented Jun 19, 2020

LekoArts commented Jun 22, 2020

jocelinqueau commented Sep 20, 2021 • edited

kogakure commented Sep 20, 2021

jocelinqueau commented Sep 20, 2021

kogakure commented Sep 21, 2021

jocelinqueau commented Sep 21, 2021

kogakure commented Sep 21, 2021

jocelinqueau commented Sep 21, 2021

kogakure commented Sep 21, 2021

jocelinqueau commented Sep 23, 2021 • edited

jocelinqueau commented Sep 23, 2021

johncalvinroberts commented May 29, 2020 •

edited

jocelinqueau commented Sep 20, 2021 •

edited

jocelinqueau commented Sep 23, 2021 •

edited