styled-components: Problem with hot module reloading & createGlobalStyle

Yup, can verify that it’s not working in v5.0.0-beta.8.

FYI: while it’s fixed in 4.3.2, it seems to persist in v5.0.0-beta.8 (both in conjunction with GatsbyJS).

any solution guys or, maybe, workarounds? (Except manual reloading =) )

This happens in Next.js 😕 It’s pretty annoying especially since I can’t just add react-hot-loader I don’t think… /cc @timneutkens

Will reopen this, maybe there’s a better way to make createGlobalStyle HMR-able from our side?

This is still an issue for createGlobalStyle I found that I needed to use version “styled-components”: “^5.0.1” in order for anything to work.

As my collegue @gl0gl0 mention above. We where having this styles bug on localhost, using razzle. We where also having this warning on our console that said “Uncaught Error: only one instance of babel-polyfill is allowed”. So we delete the import for babel from our hydrate() file on the client side, and this change fixed the styles issue! Hopefully this can help so users with the same problem. Check that you don’t have two babel-polyfill instances being loaded.

This happens to me too with Gatsby JS with the same version as @vitalybe. Re-opening issue 😃

This still happens to me with styled-components@4.1.3

Ok figured it out. Vanilla HMR replaces the whole file, which is a problem because we keep a counter for cGS to know when to remove global styles when all instances have been removed. If you use react-hot-loader in conjunction with parcel’s HMR it works correctly.

import React from 'react';
import ReactDOM from 'react-dom';
import { hot } from 'react-hot-loader';

import styled, { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  span {
    color: red;
  }
`;

const Container = styled.div`
    display: flex;
    padding: 100px;
    justify-content: center;
    > span {
        font-size: 2rem;
    }
`;

const App = hot(module)(() => (
    <Container>
        <span>THIS SHOULD BE RED</span>
        <GlobalStyle />
    </Container>
));

ReactDOM.render(<App />, document.getElementById('app'));

A unit was supplied in the tested code. The issue remains.

I think we need to figure out how to refactor away the counting mechanism. Part of the issue is the old component gets unmounted late during HMR, and the new component has already rendered, so it sees a count of one due to the HMR reset and kills the styles. On Tue, Oct 9, 2018 at 9:10 AM Max Stoiber notifications@github.com wrote:

Reopened #2074 https://github.com/styled-components/styled-components/issues/2074.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/styled-components/styled-components/issues/2074#event-1892942779, or mute the thread https://github.com/notifications/unsubscribe-auth/AAiy1h7jqMmnx--TdJDKNzd0eBwO-76qks5ujK5AgaJpZM4XNMyT .

Interesting. I’ll try and look tonight. There have been a lot of annoying edge cases around HMR lately 😕