React-hot-loader: Hot reload with styled-components

[GiancarlosIO]

My question is simple, react-hot-loader works with Styled-components?
I'm trying to create a boilerplate for react + HMR, I finished with the setup and it works fine with components, but when i try to change the styles from any SC it no update the changes.

my webpack config is here:
https://github.com/GiancarlosIO/Django-HMRReact-boilerplate

Edit:
When a change occurred it adds a script-tag in the end of the header-tag, but the styles are not updated.

That script has the changes that i made, so...

Thanks!

[gregberge]

Yes react-hot-loader works with styled-components. The problem could be in your Webpack entry setup, have you tried to remove entry_1 and entry_2? https://github.com/GiancarlosIO/Django-HMRReact-boilerplate/blob/master/webpack.config.js#L9

[GiancarlosIO]

@neoziro I try with that but it still can't reload the styled components

[GiancarlosIO]

I will close this issue because its a bug in styled-components 2.2.1 package. I have to use the 2.2.0

[gregberge]

@GiancarlosIO 👍

[gregberge]

I experienced same issue, still a problem in styled-components > 2.2.0 very annoying. Follow https://github.com/styled-components/styled-components/issues/1225

[MrKou47]

Maybe your shouldn't use extract-text-webpck-plugin in the dev environment;

[GiancarlosIO]

@MrKou47 mmmm what? :thinking:

[MrKou47]

@geco emmm.... Before I do not know I can not use extract-text-webpck-plugin in development environment. So my component's style can't hot reload. Then i remove this plugin and it works ok.
You can see this issue RHL can't reload currently when i modify component'style used css-module

[theKashey]

Components with static styles just sealed from any changes. As long they are not expected.
I hope they will fix it soon. (one line change)
UPD: I've created a PR to fix this.

[theKashey]

Resolved: https://github.com/styled-components/styled-components/issues/1225#event-1334523244