react-select css not working on Gatsby Static Build

[nsisodiya]

This may be the most probably problem with React Select.
I have created Issue on their github repo too - JedWatson/react-select#3422

Here is the summary of the issue.
When I am using react-select, I am seeing difference in static build vs development ui.

So, If I don't disable the JavaScript, This is what it shows on browser.

But If I disable the JavaScript, I am seeing this

Please guide us.

[nsisodiya]

Here is the repo for this bug - https://github.com/nsisodiya/react-select-gatsby-bug

[pieh]

Hmmm this is tough and not very intuitive. react-select seems to use emotion for styling (it's one of css-in-js variants, not regular plain css).

Because of that you would need to add gatsby-plugin-emotion plugin so it can extract critical css for initial render/javascript disabled scenario. Kind of another tricky thing is that react-select uses emotion@9 (latest is emotion@10), so you would also need to install older version of gatsby-plugin-emotion (and its peer dependencies):

npm install gatsby-plugin-emotion@^2 emotion@^9 emotion-server@^9 react-emotion@^9

and then add gatsby-plugin-emotion to your gatsby-config plugin list.

This seems to fix it for me.

[nsisodiya]

@pieh Thanks a help. Just curious,
because Styled-Component is also css in js kind of mechanism, This kind of problem will occur with styled-components too?
it is true.

[lwih]

Hey @nsisodiya, did it fix your issue? I'm having the same one but no luck, it didn't help.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!