Styled components not working with Gatsby. Reproducible.

Description

It seems like Gatsby is not adding styled component’s styles to the DOM. SC is correctly adding the classes to the DOM elements and you can even see them change dynamically, but nothing is styled correctly.

What is very weird is that I got it to work by deleting by code and then copy-pasting it again (they were no more than 10 lines of code). However, it stopped working after refreshing and I couldn’t get it to work ever again.

Steps to reproduce

Install gatsby following the “Get started” steps:

gatsby new gatsby-site

Then follow the steps on Gatsby with Styled Components.

Run the project:

npm run develop

Try to use a styled component > nothing happens.

You can see a very minimal repo with nothing more than the gatsby installation and styled-components added to it.

Repo here

Expected result

Styled components should work as expected.

Actual result

Styled components don’t work.

Environment

System: OS: macOS 10.15.1 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Shell: 5.7.1 - /bin/zsh Binaries: Node: 10.16.3 - ~/.asdf/installs/nodejs/10.16.3/bin/node Yarn: 1.17.3 - /usr/local/bin/yarn npm: 6.9.0 - ~/.asdf/installs/nodejs/10.16.3/bin/npm Languages: Python: 2.7.16 - /usr/local/bin/python Browsers: Chrome: 78.0.3904.108 Firefox: 71.0 Safari: 13.0.3 npmPackages: gatsby: ^2.18.8 => 2.18.8 gatsby-image: ^2.2.34 => 2.2.34 gatsby-plugin-manifest: ^2.2.31 => 2.2.31 gatsby-plugin-offline: ^3.0.27 => 3.0.27 gatsby-plugin-react-helmet: ^3.1.16 => 3.1.16 gatsby-plugin-sharp: ^2.3.5 => 2.3.5 gatsby-plugin-styled-components: ^3.1.16 => 3.1.16 gatsby-source-filesystem: ^2.1.40 => 2.1.40 gatsby-transformer-sharp: ^2.3.7 => 2.3.7 npmGlobalPackages: gatsby: 2.18.5

[obedparla]

Ok wtf I located the issue after realizing that it worked on Chrome incognito but not on my normal window even after clearing the cache.

the issue was due to the Chrome extension “Loom”. I have no idea why. I’m using SC in several other projects with a similar setup (Webpack, Babel, etc) with no issues.

Anyway, closing this issue. If you land here, verify whether SC runs on an incognito window and if it does, check your extensions ¯_(ツ)_/¯

[obedparla]

if I recall correctly, it was working on prod (build). The issue was only on dev