Gatsby: Styled Components does not work on gatsby build, but works perfectly on gatsby develop

[sqf]

Hello.

I use gatsby-plugin-styled-components. Everything works perfectly when 'gatsby develop' is used. But once I use 'gatsby build' and then 'gatsby serve' then 98% of Styled Components are not applied.
I updated all libraries and issue still occurs. My Gatsby version is 2.13.39.
Is there some walkaround for this issue?

BR,
Samir

[j-651]

@sqf Hi, can you run gatsby info --clipboard and paste the result here?

[j-651]

Also, have you checked out #8984 or #1836? Seems to be a similar issue.

[sidharthachatterjee]

@sqf gatsby develop doesn't run SSR while gatsby build does. Can you post a minimal reproduction?

[sqf]

@j-651 this is my 'gatsby info --clipboard':

System:
OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Shell: 5.0.3 - /bin/bash
Binaries:
Node: 10.9.0 - ~/.npm/n/versions/node/10.9.0/bin/node
npm: 6.2.0 - ~/.npm/n/versions/node/10.9.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Firefox: 60.7.0
npmPackages:
gatsby: ^2.13.39 => 2.13.39
gatsby-link: ^2.2.2 => 2.2.2
gatsby-plugin-emotion: ^2.0.7 => 2.0.7
gatsby-plugin-i18n: ^1.0.1 => 1.0.1
gatsby-plugin-manifest: ^2.2.4 => 2.2.4
gatsby-plugin-offline: ^2.2.4 => 2.2.4
gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2
gatsby-plugin-sharp: ^2.2.9 => 2.2.9
gatsby-plugin-styled-components: ^3.1.2 => 3.1.2
gatsby-plugin-typescript: ^2.1.2 => 2.1.2
gatsby-source-contentful: ^2.1.15 => 2.1.15
gatsby-transformer-remark: ^2.6.9 => 2.6.9
npmGlobalPackages:
gatsby-cli: 2.7.0

[sqf]

Some update: after more tests I realized that almost all styled components are actually not working at all with 'gatsby build'. Tags have styled-components-specific classes for example "class="header__HeaderComponent-sc-179dp4r-1 eTlxPj" however no styles are applied.

@j-651
Regarding #8984 - that's not my case because I already do have 'gatsby-plugin-styled-components' plugin included in my 'gatsby-config.js'.
Regarding #1836 - that's also seems not to be my case. It's author claims that Styled Components sometimes work and what's more important this issue was closed with a fix. And version of Gatsby that I use already contains it.

@sidharthachatterjee I tried to make a minimal reproduction but it's working correctly. And in my project it's not working :(

Any ideas what might be the cause of the problem?

[sqf]

Let me show you some parts of a result file (index.html).
Example of a working style:

.hxnawh{h0e;width:i0g;position:fixed;z-index:9;top:0;left:0;box-shadow:hnonet;} @media (min-width::768px){.hxnawh{width:0;z-index:11;}} @media (min-width:1024px){.hxnawh{width:0;padding-left:0;}} .hxnawh a{-webkit-text-decoration:none;text-decoration:none;-ms-letter-spacing:0.5px;letter-spacing:0.5px;color:#1e1e1e;margin-left:8%;} .hxnawh a:hover{color:#f1f2f1;} .hxnawh hr{opacity:0.1;color:#000000;width:92%;margin:0 auto;}

Example of a not working style:

.ktVBmN{h770epx){margin-right:53px;}:last-child{margin-right:0;}i;}

As you can see unworking styles contains this weird part {h770epx). Please notice that it's opened by curly bracket and closed with a normal bracket. It seems like a bug.

Any ideas what is this {h770epx)?

[sqf]

Alright. Problem was caused by having both gatsby-plugin-emotion and gatsby-plugin-styled-components in gatsby-config.js.
I'm closing the issue.

[afrancht]

Hello, this problem still persists and I do not have gatsby-plugin-emotion but I do have gatsby-plugin-styled-components in gatsby-config.js.

[lannonbr]

@afrancht are you able to share a repo or reproduction to see what your issue is?

[afrancht]

I am using a private repo but I can link you.

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

Once you reload the page (or you wait as I have set it up so that it reloads automatically) then it works perfectly.

[Rodrigoleon]

@afrancht I had a similar issue lead me here. I did not have gatsby-plugin-styled-components or babel-plugin-styled-components installed and gatsby-plugin-styled-components was not added to my gatsby-config.js. Adding all of these solved the issue. Silly me, I was following the styled-components docs. The Gatsby docs helped.

Perhaps you are missing babel-plugin-styled-components?

Hope this helps.

[EdwardHoward]

I just ran into this problem and it turned out to be missing semicolons in my css in the styled component string. So if none of the above solutions helped, try looking for that.

[RockyKev]

Been having this issue, as well as constant refreshing. I even tested it on various computers. Wasn't a breaking issue, since it builds correctly. While testing something else, I noticed it did render all styles in incognito mode.