Gatsbyjs Styled Components CSS delayed loading

1
votes

Currently I am facing a weird issue with GatsbyJS in combination with styled components.

In development everything is working fine but when I built and serve the site locally all styles which are created by styled components are loaded roughly 100 to 300ms later after the page has finished loading. It seems this only applies to styles which are used on layout and template files.

I also included gatsby-plugin-styled-components and babel-plugin-styled-components into my project without any success.

I created a small demo project at https://github.com/alexanderwe/gatsby-styled-components-test which shows the error. If you want you can download it and run yarn && yarn workspace gatsby-theme-test serve to see the error live.

Does anyone experienced a similar issue or has a solution for this ?

I appreciate any help

1
gatsbystyled-components

1 Answers

3
votes

It looks like you implemented wrapPageElement in gatsby-browser.js, forgot to implement it in gatsby-ssr.js as well. This means styled-components' only activated on browser load, not during server side rendering.

To do this, just copy your gatsby-browser.js into a new gatsby-ssr.js, the API should be exactly the same.