gatsby: Hot Reloading Not Working

I ran into this issue, it was solved by creating the project in the WSL2 file structure instead of the Windows file structure.

Original project that couldn’t hot reload was created in C:\Users\username\Documents

Project that was able to utilize hot reloading was created in \wsl$\Ubuntu\home\username (it’s all under a “network device” apparently)

Quick tip for this also, you can open file explorer to your current WSL2 directory by running the command “explorer.exe .”. It can also be accessed easily in VS Code by installing the VS Code Remote Development plugin, found here: https://code.visualstudio.com/docs/remote/remote-overview

I had the same problem where only parts of my project were hot reloading. No error messages or warnings either. It turns out it was because the casing of the component name in my imports was not the same as the actual component folder name.

Just in case it helps anyone like me, the fix for my little project was to run a ‘gatsby build’ before running ‘gatsby develop’. No idea why this fixed my hot reload, but it’s the only thing that’s worked for me after a couple days of searching forums and trying a million different solutions.

Just installed Gatsby and cloned the Hello World starter repo with Node version v10.19.0 on Mac Mojave 10.14.6. Can confirm that running ‘gatsby build’ and then ‘gatsby develop’ fixed the issue for me (for now). Much appreciated!

The lack of support for hot reloading on WSL2 is a known issue that should eventually be resolved:

https://github.com/microsoft/WSL/issues/4739

TLDR, Windows file system changes are not reported to Linux, therefore hot reloading cannot do its thing.

For me gatsby-plugin-preact plugin was breaking hot-reloading.

Just in case it helps anyone like me, the fix for my little project was to run a ‘gatsby build’ before running ‘gatsby develop’. No idea why this fixed my hot reload, but it’s the only thing that’s worked for me after a couple days of searching forums and trying a million different solutions.

npm run develop -o

Hot Reloading doesnt seem to work if I nest a component in a subdirectory inside src/components. For example, src/components/header.js reloads fine, while src/components/header/index.js does not.

Update:

This only happens if we do an implicit import.

Does not work: src/components/header/index.js import Header from './header

Works as expected: src/components/header/index.js import Header from './header/header

Solved by adding a src/pages/404.js file.

import React from 'react'

const PageNotFound = () => {
  return <>404, page not found!</>
}

export default PageNotFound

@rori4 we sadly don’t do HMR for gatsby-node, gatsby-config or gatsby-browser. You’ll need to rerun gatsby develop or gatsby build

This seems really wrong. Gatsby’s build command is for production: it should have nothing to do with the dev server.

Well not sure if this will help everyone, but I had setup WSL 2 through the insiders program, and when I downgraded my ubuntu version to wsl1 hot reload started working again. The command I had to run was wsl --set-version Ubuntu 1 more info here about WSL 2 https://docs.microsoft.com/en-us/windows/wsl/wsl2-install

Babel plugin presets are breaking this. Remove them. In my case it babel-preset-gatsby it uses for browserslist but was completely breaking HMR. Fresh install.

I updated everything in with npm. Before update, everything worked fine, but after the update, hot reload stopped working ([HMR] lines show up in console, but the page content/CSS doesn’t update, after manual page refresh - content updates). What I tried: Deleted node_modules, .cache, package-lock.jason, npm install - problem still exists gatsby build and then gatsby develop - reload not working Tried solutions with @hot-reload/react-dom - reload not working Using Ubuntu 20. Chrome dont show any error, Firefox shows this:

Ok, my problem was that I updated react and react-dom to Latest verion (17.0.1). Downgraded back to Wanted (16.14.0). Fixed the problem!

I can confirm I have the same issue. When I change the title in the gatsby config, the title just disappears. I have to redeploy the project in order for it to run properly and apply the change

I can’t reproduce this on my machine, please try Node v10 or v11 👍

I had the same problem where only parts of my project were hot reloading. No error messages or warnings either. It turns out it was because the casing of the component name in my imports was not the same as the actual component folder name.

OMG THANK YOU 🙏🏻 🤦🏼‍♂️

I had this same issue but solved it by updating my dependencies. For reference: https://flaviocopes.com/update-npm-dependencies/

npm install -g npm-check-updates ncu -u npm update

This fixed it for me. Hope it helps.

I see a behavior similar to @Tenkir but with case sensitivity.

filename: src/components/Header/index.js
does not work: import Header from './header/
does work: import Header from './Header/

Are there any solutions for this issue on Mac?? Having the same problem with some of the components not hot reloading. Have to restart the whole server just to get updates.

I ran into this issue, it was solved by creating the project in the WSL2 file structure instead of the Windows file structure.

Original project that couldn’t hot reload was created in C:\Users\username\Documents

Project that was able to utilize hot reloading was created in \wsl$\Ubuntu\home\username (it’s all under a “network device” apparently)

Quick tip for this also, you can open file explorer to your current WSL2 directory by running the command “explorer.exe .”. It can also be accessed easily in VS Code by installing the VS Code Remote Development plugin, found here: https://code.visualstudio.com/docs/remote/remote-overview

This worked for me also, thanks! The WSL2 terminal was mounting directly to my Windows 10 user folder by default, so I created my Gatsby project there. After recreating my gatsby project (gatsby new projectname) in the WSL2/Linux file structure, hot reloading worked.

Also, a huge bonus in my case was that my compilation times (after performing a gatsby develop) went down from ~30000ms to ~3500ms.

For what it’s worth, I was hitting this issue myself using a new gatsby-theme-blog starter project and resolved the issue by updating my dependencies. The starter repo had out of date dependencies when it was cloned/installed, so updating the version had the fixes I needed!

@AGreenObject Could you inspect the console in your browser and check if the web socket calls (that enable HMR) are being completed?

Perhaps this has to do with web sockets being blocked in your network stack or something?

Commenting for future reference:

I had a similar problem with an older Gatsby site that I just updated (v4 -> v5).

The issue that I found was that for components which default exported the React.FC directly HMR wasn’t working. Solution was to store the React.FC in a variable first and then export this variable.

e.g. in pages/index.tsx

export default () => {
  return (
    <h1>Hello world</h1>
  )
}

Change to

const IndexPage = () => {
  return (
    <h1>Hello world</h1>
  )
}
export default IndexPage

It’s strange but seems to fix the issue.

gatsby clean
gatsby build
gatsby develop

worked for me too

Oh sweet! cleared the cache rebooted gatsby and mapbox page is fixed! I think this is related to the default-starter being out of date really bad. You have to patch all kindsa stuff if you actually resolve the warning then worker-loader can perform correctly but it had errors until I dumped .cache dir.

Doesn’t work for me. I have a 404 page and HMR is connected. Doesn’t releoad when I save my changes. What’s more, is some changes I have don’t get loaded at all. I applied an h-full class to one of my divs and it just doesn’t show up at all. I can edit the class from the console and it works. For some reason, there’s a disconnect somewhere.

I am on MacOS. Here is my gatsby info --clipboard:

System:
    OS: macOS 10.15.7
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 16.0.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.10.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 90.0.4430.85
    Safari: 14.0.3
  npmPackages:
    gatsby: ^3.3.1 => 3.3.1
    gatsby-plugin-gatsby-cloud: ^2.2.0 => 2.3.0
    gatsby-plugin-image: ^1.2.1 => 1.3.1
    gatsby-plugin-manifest: ^3.2.0 => 3.3.0
    gatsby-plugin-offline: ^4.2.0 => 4.3.0
    gatsby-plugin-postcss: ^4.3.0 => 4.3.0
    gatsby-plugin-react-helmet: ^4.2.0 => 4.3.0
    gatsby-plugin-sharp: ^3.2.1 => 3.3.1
    gatsby-source-filesystem: ^3.2.0 => 3.3.0
    gatsby-transformer-sharp: ^3.2.0 => 3.3.0
  npmGlobalPackages:
    gatsby-cli: 3.3.0

pulling my hair over WSL 2 hot reloading, doesn’t seem to be detecting changes even though I’m in the linux file structure and webpack hmr seems to be working in the browser… it’s like it’s not seeing changes when I save then because gatsby develop log shows nothing.

UPDATE 1/5/2020: got this working: so apparently there was some confusion about these posts regarding the linux file system, I was creating my project in the ubuntu terminal under /mnt/c/Users/seand , thinking this was the linux file system, but actually it seems that is some kind of virtualized service… if I go to /home, and create a project my personal folder, it works great… I guess it’s the difference between windows file system and linux file system and it’s new to WSL 2. The performance difference is dramatic also.

I also have issues with hot reload. Difficult to tell when it started exactly, in gatsby develop when I save whole page reloads, indeed, but I kind of expect only one component to update on screen without whole page updating. Am I right to expect that?

Anyways, I also have aliases set up via gatsby-plugin-alias-imports. Others mention some import-related issues, so could be related to this also.

I ran into this issue, it was solved by creating the project in the WSL2 file structure instead of the Windows file structure.

Original project that couldn’t hot reload was created in C:\Users\username\Documents

Project that was able to utilize hot reloading was created in \wsl$\Ubuntu\home\username (it’s all under a “network device” apparently)

Quick tip for this also, you can open file explorer to your current WSL2 directory by running the command “explorer.exe .”. It can also be accessed easily in VS Code by installing the VS Code Remote Development plugin, found here: https://code.visualstudio.com/docs/remote/remote-overview

@mtdenton’s advice worked for me to enable HML, but I also had to run “code .” inside my WSL project folder. [dont forget the dot “.” at the end!]

I am also experiencing the same issue. Running on ubuntu 19.04

Can you try another operating system or code editor? We’d need to find some sort of reproduction or information on how to reproduce this issue 😮

@LekoArts I’ve tried another operating system, Windows 10 Home, 10.0.0.17763 Build 17763, using powershell–and I’ve gotten hot reloading to work. I’m not exactly sure what the issue is/was, but I can tell you that I was using Ubuntu on the WSL (Windows Subsystem for Linux), and I assume the issue that I was having must have something to do with this.