gatsby: Gatsby doesn't always refresh changes

Description

Gatsby sometimes fails to reload changed components.

Issue can be reproduced after version v2.24.9, so something changed between 2.24.9-2.24.10.

Steps to reproduce

https://github.com/tu4mo/gatsby-reload-issue

git clone git@github.com:tu4mo/gatsby-reload-issue.git
cd gatsby-reload-issue
npm install
npm start

Run (multiple times if needed) in a another terminal:

node update-fakelib.js

Expected result

The scripts rewrites 10 components with current timestamp. All changed components are hot reloaded.

Actual result

Some, all or none of the components are updated, inconsistently.

Environment

  System:
    OS: macOS 11.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.15.1 - ~/.nvm/versions/node/v14.15.1/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v14.15.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 87.0.4280.88
    Edge: 87.0.664.57
    Firefox: 83.0
    Safari: 14.0.1

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 11
Comments: 70 (25 by maintainers)

Most upvoted comments

I just want to echo @pbxr250 comment: I was running into a bunch of issues related to hot module reloading, and it was only in a single component. Basically, my first change to either the CSS or JS would show in the browser, but all following edits would not. There were no warnings or errors in the console.

I finally figured out it was because of a camel-case problem. My component was named WhatWeAreBuilding.js and it was imported as WhatWeArebuilding.js (with a lower-case b). In my humble opinion, this should have thrown an import error, as that file doesn’t exist. Instead, it seems to work, but only for the first hot module reload.

runemadsen on Jul 20, 2021

Hot reload is still broken.

tu4mo on Feb 12, 2021

I tried touch:ing the components in my repro, but the buggy behavior is still the same. It doesn’t matter how the files are updated. I hope the Gatsby team prioritizes some time to fix this soon.

tu4mo on Jan 12, 2021

Yes, I tried it. I have another issue with Gatsby v3 so I haven’t yet been able to completely switch to v3, but regarding this issue things are looking good 🎉

tu4mo on May 20, 2021

Yeah this is still an issue for me

pirtlj on May 9, 2021

Thank you so much for reproduction! 💜

I definitely see how develop is getting stuck eventually. Also in the given version range - #25815 looks like a primary suspect.

Investigating this.

vladar on Nov 20, 2020

Extra special thanks to @vladar for sticking with me through this!

tu4mo on Jun 9, 2021

Have you tried it? Maybe remove yarn.lock and try on your project? Gatsby has this dependency definition for webpack "webpack": "^5.35.0", so it shouldn’t block you from upgrading?

vladar on May 20, 2021

The good news is that I’ve tried it with the latest webpack5 (using a branch from this PR: https://github.com/gatsbyjs/gatsby/pull/29145) and the repro worked for me almost as expected. This suggests that the issue was likely fixed in webpack5 (there could be one more minor edge case there, not sure yet).

We will publish gatsby v3 pre-release soon with this PR included so that you could try it.

vladar on Feb 14, 2021

@karlhorky Yes, I use yarn workspaces with Gatsby so some packages in node_modules are symlinks to those workspaces and they work fine. And by fine I mean they work just like any other packages, but after 2.24.9 HMR fails in general.

tu4mo on Dec 10, 2020