Gatsby: Styles appearing with delay when using external UI library

[meienberger]

Summary

I created a UI library which uses styled-components internally and I'm trying to use it inside my Gatsby website. On dev mode everything is perfectly working but when I build, the page components of my library are rendered first with no style at all and then after a small delay, it flashes and everything is ok.

I started searching how to solve this issue and found out about this library. Some people told that they fixed their issue by just installing this plugin. But for me, the result is exactly the same. Am I missing something ?

In my gatsby-config.js

 plugins: [
    `gatsby-plugin-styled-components`,
 ]

Do I have to add further options to solve my issue ? (I already tried with ssr: true) Or is this library not meant to solve my issue at all ?

Thanks for your help. Here's the repo of what I tried to do : https://github.com/meienberger/gatsby-base

[Js-Brecht]

There seems to be something wrong with the UI library. In your example repo, if I make my own styled component and add it to the page, it renders correctly during SSR, including the CSS. So I know gatsby-plugin-styled-components is working, but it's not processing the component from the UI library correctly.

It might help to be able to see the source of the UI library.

[Js-Brecht]

Okay, the problem is a styled-component version conflict.

waasabi-ui uses version ^4.4.1, meanwhile the consuming project is using version ^5.0.1. If I use

  "resolutions": {
    "styled-components": "^5.0.1"
  }

in the package.json to force a consistent styled-components, the issue is fixed.

[meienberger]

@Js-Brecht Thank you very much ! Yes it was styled-components version. It didn't even cross my mind...

[wardpeet]

Awesome! Thanks @Js-Brecht

Marking this as resolved.