Hot reloading/build intermittent problems esp with styled emotion components

[theskillwithin]

Description

When working on gatsby project seems like all the sudden in the past few months hot reloading / build has serious intermittent problems. especially noticeable on project with styled components ( emotionjs ). can take 1-10+ times hitting save without hot reloading working and even upon waiting a long time or refreshing the browser still not updated. I thought was similar to issue #26192 but I'm not getting the same error so is a different issue.

occurs on all browsers

have been reading into issues, and deep diving into why this might be happening for awhile now so I really appreciate your help <3

Steps to reproduce

git clone repo (simplified cloned repo) : https://github.com/theskillwithin/gatsby-hot-reloading-styled-components npm i npm start

start editing components and styles and sometimes hot reloading fails. ie: go to src/components/About/styles.js and edit the styles in line 25 (export const Center = styled.div``)

remove styles from this and no change appears to occur in hot reloading intermittently

Expected result

rebuild and hot reloading works

Actual result

rebuild seems to occur successful in terminal, and even --verbose seems to show no errors. however sometimes to a very painful extent does not work. even upon refreshing browser. even waiting 10 seconds between saves does not help. end up having to restart build to get to work

Environment

➜  gatsby-hot-reloading-styled-components git:(master) npx gatsby info --clipboard

  System:
    OS: macOS 10.15.6
    CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v2 @ 3.50GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Languages:
    Python: 2.7.17 - /usr/local/bin/python
  Browsers:
    Chrome: 84.0.4147.135
    Firefox: 79.0
    Safari: 13.1.2
  npmPackages:
    gatsby: ^2.24.52 => 2.24.52
    gatsby-background-image: ^1.1.2 => 1.1.2
    gatsby-image: ^2.4.16 => 2.4.16
    gatsby-plugin-emotion: ^4.3.10 => 4.3.10
    gatsby-plugin-google-analytics: ^2.3.13 => 2.3.13
    gatsby-plugin-layout: ^1.3.10 => 1.3.10
    gatsby-plugin-manifest: ^2.4.26 => 2.4.26
    gatsby-plugin-offline: ^3.2.26 => 3.2.26
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5
    gatsby-plugin-sharp: ^2.6.30 => 2.6.30
    gatsby-source-contentful: ^2.3.40 => 2.3.40
    gatsby-source-filesystem: ^2.3.27 => 2.3.27
    gatsby-source-shopify: ^3.2.29 => 3.2.29
    gatsby-transformer-remark: ^2.8.31 => 2.8.31
    gatsby-transformer-sharp: ^2.5.13 => 2.5.13

[ascorbic]

I can reliably repro this. It is recompiling every time, but isn't doing HMR.

[ascorbic]

I should add that I am getting the same error when editing the JSX file too, not just the styles.

[ascorbic]

OK, I think I've solved it. The problem is that you're importing the JSX and styles for the about component like this:

https://github.com/theskillwithin/gatsby-hot-reloading-styled-components/blob/master/src/pages/index.js#L4-L6

import AboutPageContent from '~/components/about'
import Newsletter from '~/components/Newsletter'
import { AboutAngledBG } from '~/components/about/styles'

However the folder name isn't about/index.js, it's About/index.js. Because your filesystem is case-insensitive it compiles fine, but it means that when webpack sees the changed file, it doesn't recognise that it's a dependency. Changing the import to this fixes it for me:

import AboutPageContent from '~/components/About'
import Newsletter from '~/components/Newsletter'
import { AboutAngledBG } from '~/components/About/styles'

[ascorbic]

I'm going to close this as it's fixed for me. If it's still broken for you then please reopen and let me know.