Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Gatsby doesn't always refresh changes

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:11
Comments:69 (25 by maintainers)

Top GitHub Comments

6reactions

runemadsencommented, Jul 20, 2021

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.

3reactions

tu4mocommented, Feb 12, 2021

Hot reload is still broken.

Top Results From Across the Web

Fast Refresh | Gatsby

This direct feedback on your changes results in a better overall development experience (DX). Fast Refresh is enabled by default in Gatsby's development...

Gatsby hot reloading does not reload in the Hello World starter ...

Gatsby Develop hot reload was not working whenever I made changes to files, plus, Gatsby Develop was terribly slow to compile code and...

Gatsby Changelog | 5.3.0

We are constantly on the hunt for ways to make Gatsby faster and more reliable, and in this release we made a change...

Basic Features: Fast Refresh - Next.js

Next.js' Fast Refresh is a new hot reloading experience that gives you instantaneous feedback on edits made to your React components.

Started using Gatsby 3.0, is the hot reload slow for everyone ...

I started with one of their official default starters, but when I do "gatsby develop" and start working on localhost:8000, after making changes...