Class applied by the className
prop is not updated on hot module reload
#142
Labels
not stale
This issue has gone quiet but will be kept open
className
prop is not updated on hot module reload
#142
Description
Hi @timhagn, thanks for this library, it's very cool :)
This issue is a quirk, rather than armageddon, and see below for a workaround - but I thought it worth mentioning as it foxed me for 20 minutes until it dawned on me that the styles weren't updating 😭 ...
The class applied by the
className
prop is not updated on hot module reload.Steps to reproduce
yarn install && yarn start
to get gatsby hot reloadingExpected result
I expected the view to update during hot reloading.
Actual result
The CSS from the initial pageload persists in the BackgroundImage until the page is reloaded
Environment
This appeared for me using Material UI's styling, and has reproduced with styled-components.
System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.18.4 - /usr/local/opt/node@12/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 6.14.6 - /usr/local/opt/node@12/bin/npm
Languages:
Python: 2.7.17 - /Users/thc29/.pyenv/shims/python
Browsers:
Chrome: 88.0.4324.182
Firefox: 81.0.2
Safari: 14.0.3
npmPackages:
gatsby: ^2.32.3 => 2.32.3
gatsby-background-image: ^1.4.1 => 1.4.1
gatsby-image: ^2.11.0 => 2.11.0
gatsby-plugin-manifest: ^2.12.0 => 2.12.0
gatsby-plugin-offline: ^3.10.0 => 3.10.0
gatsby-plugin-react-helmet: 3.10.0 => 3.10.0
gatsby-plugin-sharp: ^2.14.1 => 2.14.1
gatsby-plugin-styled-components: ^3.10.0 => 3.10.0
gatsby-source-filesystem: ^2.11.0 => 2.11.0
gatsby-transformer-sharp: ^2.12.0 => 2.12.0
npmGlobalPackages:
gatsby-cli: 2.19.1
WORKAROUND
It's evidently fine for the actual build. So I'm developing the styles using the
style={{ ... }}
prop, which always get applied on hot reload. I'll then either leave the styles there or put them into the classes elsewhere once I'm done developing on them.The text was updated successfully, but these errors were encountered: