Skip to content

Problem with hot module reloading & createGlobalStyle #2074

@frednomoon

Description

@frednomoon

System:

  • OS: macOS Sierra 10.12.6
  • CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  • Memory: 105.95 MB / 16.00 GB
  • Shell: 3.2.57 - /bin/bash

Binaries:

  • Node: 10.1.0 - ~/.nvm/versions/node/v10.1.0/bin/node
  • Yarn: 1.6.0 - /usr/local/bin/yarn
  • npm: 6.1.0 - ~/.nvm/versions/node/v10.1.0/bin/npm
  • Watchman: 4.7.0 - /usr/local/bin/watchman

npmPackages:

  • styled-components: ^4.0.0-beta.10 => 4.0.0-beta.10

Hi there, not sure if I would call this a bug but thought it was worth pointing out.

I have started using the createGlobalStyle function in v4, but have run into some issues relating to Hot Module Reloading. Whenever a reload is triggered by something outside the createGlobalStyle function, all of its comprising css rules are lost. Here is a simple project which demonstrates this:
https://github.com/frednomoon/styled-hot-reload

It seems from this behaviour that its necessary to reload the module containing the global styles every time the page changes. But, of course, this doesn't happen unless you actually change something inside that module.

I'm guessing its probably possible to solve this with some additional config in my bundler, but obviously would be great to avoid things like that.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions