Gatsby: [Netlify] Gatsby 2.0 does not load some styles correctly (with styled-components)

[dantehemerson]

Description

I'm using styled-components to stylize my page.
In my development environment, the site has the expected look, however, when I deploy my Netlify website, it has a strange behavior.

When reloading the page, only the HTML is displayed and then loads some styles, the problem is that not all styles are loaded, so the page looks bad.
Only when changing between pages without reloading the styles are applied.

In the console I receive this warning:

The resource
https://tailor-shop.netlify.com/webpack-runtime-1c80de8654c01e257aca.js 
was preloaded using link preload but not used within a few seconds 
from the window's load event. Please make sure it has an 
appropriate `as` value and it is preloaded intentionally

Steps to reproduce

This is my website: https://tailor-shop.netlify.com/
Just try to load the page.
This is the repo: https://github.com/dantecalderon/store
If you have some solution you can make a PR

Environment

  System:
    OS: Linux 4.9 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: x64 Intel(R) Core(TM) i3-2370M CPU @ 2.40GHz
    Shell: 5.3.1 - /usr/bin/zsh
  Binaries:
    Node: 8.12.0 - /usr/bin/node
    Yarn: 1.9.4 - /usr/bin/yarn
    npm: 6.4.1 - /usr/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Firefox: 52.4.0
  npmPackages:
    gatsby: ^2.0.21 => 2.0.21 
    gatsby-plugin-netlify: ^2.0.1 => 2.0.1 
    gatsby-plugin-netlify-cms: ^3.0.3 => 3.0.3 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0 
    gatsby-plugin-styled-components: ^3.0.0 => 3.0.0 
  npmGlobalPackages:
    gatsby-cli: 2.4.2

[ThePaulMcBride]

It doesn't look like you have the gatsby-plugin-styled-components plugin included in your gatsby-config.js.

Check out this guide. https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/

[dantehemerson]

Yes, that was the error. Thank you @ThePaulMcBride

[afrancht]

Hello,

I still have this error and I have gatsby-plugin-styled-components in gatsby-config.js.

I half-fixed this by making it automatically reload but it is not an ideal fix! You can see it here:

https://5d41797b858ef10009855096--heuristic-booth-6cbb29.netlify.com

[ervinebalo]

Hello,

I still have this error and I have gatsby-plugin-styled-components in gatsby-config.js.

I half-fixed this by making it automatically reload but it is not an ideal fix! You can see it here:

https://5d41797b858ef10009855096--heuristic-booth-6cbb29.netlify.com

@afrancht , how do you force it to reload? I am still having the problem

[afrancht]

Hello @ervine13,

I added the reload on the serviceWorker but I was actually able to fix the problem!

Refer to: https://github.com/gatsbyjs/gatsby/issues/16252#issuecomment-524647766

Good luck!!

[zainzafar90]

It doesn't look like you have the gatsby-plugin-styled-components plugin included in your gatsby-config.js.

Check out this guide. https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/

Thank you 🙏