Styled components does not hot reload

[bobissict]

I'm using the Gatsby starter blog with styled components and the hot reloading does not work. It works for everything else, changing JSX etc but it just won't pick up changes from styled components forcing me to have to manually reload the page.

I've tried a bunch of things but nothing seems to work.

I'd appreciate any help as it's driving me crazy.

[danoc]

@bobissict – Are you seeing this warning in your console?

I haven't dug into this at all but see this warning often.

[bobissict]

super weird, i have another gatsby site that I setup with the gatsby-blog-starter which the hot reloading works. I just ended up cloning that site and using it.

Gonna just mark this as closed unless I can recreate the issue again

[KyleAMathews]

There was a recent PR that fixed hot reloading for some stuff so perhaps the older site just needed upgraded.

[pgegenfurtner]

I've got the same problem here. I created a new gatsby project based of the default starter, then added the gatsby-plugin-styled-components, imported styled-components and created the first one in pages/index.js

When I create a new styled component and use it, hot reloading works fine, but as soon as I change a property of a already loaded styled-component, the hot reload doesn't work and I have to manually refresh.

I can see the classes of the component hot reloading, but the css itself stays old.

I'm on the newest gatsby version (1.9.80)

[monsieurnebo]

Same problem here ✋

I can see the concerned class beeing updated, but the new CSS properties don't show up.

Versions:

[email protected]
├── [email protected]

[KyleAMathews]

Sounds like this is the problem styled-components/styled-components#1225

More discussion here: https://spectrum.chat/gatsby-js?thread=b7270640-d077-411f-bda8-0b06a4f67bd3

[KyleAMathews]

If you downgrade styled components to v2.2.0 it works apparently.

[monsieurnebo]

@KyleAMathews I just tested with v2.2.0, it's working fine.

[greglobinski]

@KyleAMathews Thank you

[Nick-vr]

Downgrading to v2.0.0 did not fix the problem for me.

[nthndnn]

Similarly to @Nick-vr, I'm also having this issue

[ziyafenn]

@nathanjdunn @Nick-vr uninstall the styled-components package and run this again:
npm install --save gatsby-plugin-styled-components [email protected]

[Nick-vr]

@ziyafenn Thank you!

[monsieurnebo]

Seems fixed by [email protected].

[KyleAMathews]

Great! Closing this now.