Hot Reloading Not Working

[AGreenObject]

** Summary**
After developing my first hello-world using gatsby develop and viewing localhost:8000, I noticed that hot reloading isn't actually working for me. Changes made in VCS code are not being seen in browser, even upon reload of the page.

The only way to see changes I've made in VCS code to index.js is to restart my CLI and re-run gatsby develop

Steps I took
Command line:
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
cd hello-world
gatsby develop (however, after this step, I get:

info ℹ ｢wdm｣: Compiled successfully. )

The terminal then hangs.

changed content in src/pages/index.js using VCS code.

Environment (if relevant)

System:
OS: Linux 4.4 Ubuntu 18.04.1 LTS (Bionic Beaver)
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 12.1.0 - /home/linuxbrew/.linuxbrew/bin/node
npm: 6.9.0 - /home/linuxbrew/.linuxbrew/bin/npm
npmPackages:
gatsby: ^2.4.2 => 2.4.2
npmGlobalPackages:
gatsby-cli: 2.5.12

File contents (if changed)

[LekoArts]

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

[AGreenObject]

@LekoArts I've tried running the same procedure with both Node v10 and v11 with the exact same result. Is there anything else I should try or do you need more information about something?

[LekoArts]

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 :O

[sidharthachatterjee]

@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?

[rori4]

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

[wardpeet]

@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

[AGreenObject]

@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?

@sidharthachatterjee I'll check this out when I get home this evening.

[AGreenObject]

@sidharthachatterjee looks like the web socket isn't being blocked.

[AGreenObject]

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 :O

@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.

[wardpeet]

can you see if anything is being emitted through the websocket by watching eventstream. Could you also try to update fs.inotify.max_user_watches might be a silent error on your end.

[interglobalmedia]

Hi, I am having problems with hot reloading as well. Have been on and off, but today was really bad. I updated all my gatsby related plugins in case if there were some straggling version 1 or border version 2 straggling there (started with the gatsby default starter which I downloaded from the repo), and this is what I am working with now:

System:
    OS: macOS 10.14.4
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
    npm: 6.7.0 - ~/.nvm/versions/node/v11.14.0/bin/npm
  Languages:
    Python: 2.7.15 - /usr/local/bin/python
  Browsers:
    Chrome: 75.0.3770.90
  npmPackages:
    gatsby: ^2.9.4 => 2.9.4
    gatsby-image: ^2.1.4 => 2.1.4
    gatsby-plugin-emotion: ^4.0.7 => 4.0.7
    gatsby-plugin-feed: ^2.2.3 => 2.2.3
    gatsby-plugin-google-analytics: ^2.0.21 => 2.0.21
    gatsby-plugin-manifest: ^2.1.1 => 2.1.1
    gatsby-plugin-offline: ^2.1.3 => 2.1.3
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-sass: ^2.0.11 => 2.0.11
    gatsby-plugin-sharp: ^2.1.5 => 2.1.5
    gatsby-plugin-sitemap: ^2.1.0 => 2.1.0
    gatsby-plugin-typography: ^2.2.13 => 2.2.13
    gatsby-remark-copy-linked-files: ^2.0.13 => 2.0.13
    gatsby-remark-images: ^3.0.16 => 3.0.16
    gatsby-remark-prismjs: ^3.2.11 => 3.2.11
    gatsby-remark-responsive-iframe: ^2.1.1 => 2.1.1
    gatsby-remark-smartypants: ^2.0.9 => 2.0.9
    gatsby-source-filesystem: ^2.0.39 => 2.0.39
    gatsby-transformer-remark: ^2.4.0 => 2.4.0
    gatsby-transformer-sharp: ^2.1.21 => 2.1.21
  npmGlobalPackages:
    gatsby-cli: 2.5.8

Strangely, I also have been getting the following re Workbox in the Chrome DevTools Console:

workbox Router is responding to: /
11:16:59.596 workbox-core.dev.js:132 workbox Router is responding to: /component---src-pages-index-js-de75db7165a8435fa31c.js
11:16:59.600 workbox-core.dev.js:132 workbox Router is responding to: /page-data/index/page-data.json
11:16:59.605 workbox-core.dev.js:132 workbox Precaching is responding to: /webpack-runtime-0029c4e5aca2701ef598.js
11:16:59.610 workbox-core.dev.js:132 workbox Precaching is responding to: /app-c3c9e9507e5f82f92060.js
11:16:59.615 workbox-core.dev.js:132 workbox Using NetworkFirst to respond to '/page-data/index/page-data.json'
11:16:59.619 workbox-core.dev.js:132 workbox Precaching is responding to: /styles-fe3bab18b4dc88fb4d66.js
11:16:59.626 workbox-core.dev.js:132 workbox Precaching is responding to: /1-79a8ef40e04afc78e98d.js
11:16:59.632 workbox-core.dev.js:132 workbox Using CacheFirst to respond to '/component---src-pages-index-js-de75db7165a8435fa31c.js'
11:16:59.664 workbox-core.dev.js:132 workbox Router is responding to: https://www.google-analytics.com/analytics.js
11:16:59.673 workbox-core.dev.js:132 workbox Using StaleWhileRevalidate to respond to 'https://www.google-analytics.com/analytics.js'
11:17:00.092 workbox-core.dev.js:132 workbox Precaching is responding to: /manifest.webmanifest

Is that supposed to be happening?

I do not use the global install of gatsby because when I tried a while back there were a whole bunch of dependencies which were required and not added to the global install, AND hot reload did not work. So I switched to npx instead. Which was working well (with a hiccup or two on occasion but well overall) until yesterday. Here is the link to the repo for viewing: docscorneronline

Update: Now I am getting the following in the Chrome DevTools Console:

workbox-core.dev.js:132 workbox Network request for '/2b40ccbe4a28bd46ac66.hot-update.json' threw an error. TypeError: Failed to fetch
_print @ workbox-core.dev.js:132
(anonymous) @ workbox-core.dev.js:149
(anonymous) @ workbox-core.dev.js:1407
step @ workbox-core.dev.js:14
(anonymous) @ workbox-core.dev.js:27
Promise.then (async)
step @ workbox-core.dev.js:24
(anonymous) @ workbox-core.dev.js:25
Promise.then (async)
step @ workbox-core.dev.js:24
(anonymous) @ workbox-core.dev.js:32
(anonymous) @ workbox-core.dev.js:11
wrappedFetch @ workbox-core.dev.js:1424
(anonymous) @ workbox-strategies.dev.js:1035
step @ workbox-core.dev.js:14
(anonymous) @ workbox-core.dev.js:32
(anonymous) @ workbox-core.dev.js:11
_getFromNetwork @ workbox-strategies.dev.js:1061
(anonymous) @ workbox-strategies.dev.js:979
step @ workbox-core.dev.js:14
(anonymous) @ workbox-core.dev.js:32
(anonymous) @ workbox-core.dev.js:11
makeRequest @ workbox-strategies.dev.js:1020
(anonymous) @ workbox-strategies.dev.js:938
step @ workbox-core.dev.js:14
(anonymous) @ workbox-core.dev.js:32
(anonymous) @ workbox-core.dev.js:11
handle @ workbox-strategies.dev.js:942
handleRequest @ workbox-routing.dev.js:365
(anonymous) @ workbox-routing.dev.js:835
12:06:50.630 sw.js:1 Uncaught (in promise) TypeError: Failed to fetch

[interglobalmedia]

Now, when I went into another gatsbyjs v2 project which has been successfully deployed (very recently) after updating OSX (now on version 10.14.5), I am getting the following error in the console which usually goes away on refresh, but now does NOT:

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
XMLHttpRequest.request.onreadystatechange
/Users/mariacam/Development/interglobalmedia/webpack/bootstrap:52
  49 | } else {
  50 | 	// success
  51 | 	try {
> 52 | 		var update = JSON.parse(request.responseText);
  53 | 	} catch (e) {
  54 | 		reject(e);
  55 | 		return;

And in the terminal console, I am getting the following:

info ℹ ｢wdm｣:
info ℹ ｢wdm｣: Compiled successfully.
Page not found /dev-404-page
Page not found /dev-404-page
Page not found /dev-404-page
Page not found /dev-404-page
Page not found /dev-404-page
Page not found /dev-404-page
Page not found /dev-404-page

[interglobalmedia]

FYI: I found out in my case that it was a Chrome browser issue. Gatsby works in Firefox and Safari for me but not Chrome. Hope this helps others who might be having similar issues.

[ken-nah]

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

[wardpeet]

Mind sharing your environment by running gatsby info --clipboard in your project directory and paste the output here.

It would also be really helpful if you can create a reproduction or share your source code.

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[franklinfarahani]

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.

[lbittner-pdftron]

I'm having hot reload issues with certain parts of my project as well. When i make a change to the file i get the [HMR] bundle rebuilt in Xms message, but the content on the page does not actually change right away. I have found, however, that if I wait multiple minutes, the page will eventually update.

Running on MacOS 10.14.5.

[savkevip]

I have issue to with HR :/

[mtdenton]

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

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!

[RLloyd]

npm run develop -o

[gkatzioras]

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!]

[NateRadebaugh]

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!

[timothy-kodes]

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.

Thanks so much!! This worked for me!! I quess for now we need to keep the websites inside ubuntu itself on wsl1/wsl2 for hot reloading to work. I had the same issue with Jekyll sites not live reloading, but now it's doing it..happy 👍

[RilDev]

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

import React from 'react'

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

export default PageNotFound

[John-Di]

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!

[machineghost]

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

[Neilblaze]

WSL2 is creating issues on hot-reloading. Don't know why, but I followed this, it still doesn't work!

@microsoft should look into this asap!

[holylander]

Hi friends!

Im running gatsby develop on windows. After trying many things, including wsl, npm clenaup etc, I realized that my antivirus sophos was blocking the webpack hot reload socket __webpack_hmr.

All I had to do is to disable the antivirus for a while. ( You are free to uninstall it or maybe change to another one ).

hope it works for you ;)

[emalindahk]

I had the same problem. What worked for me was to ;

• Delete package-lock.json and node_modules folder
• Run npm install

[Phillywonka]

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

[tasesmuemils]

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:

[tasesmuemils]

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!

[logemann]

Same error here. From one day to another. Seems to affect only one project of my several gatsby ones. Whats happening is:

See the right EventStream Pane of the chrome dev console. My changes get noticed by HMR because i always get a new event but only sometimes the hash changes. If it does, everything is fine, but most of the time it doesnt change so i dont get an update.

Some things i checked:

• file is updated on fs
• completely cleaned and wiped out caches and node_modules to no avail

Quite clueless here.

Update:
Got it. Thanks to @franklinfarahani i checked my folder structure again and it was a lowercase/uppercase issue with the folder where the components reside. Everything worked except for hot-reloading. WTH.

[eth0izzle]

I was having the same issue. I was importing components with their filename as uppercase (Dashboard via dashboard). Whilst they rendered fine hot-reload was not working. Seems like a bug as on Windows Dashboard and dashboard are the same file and should be treated as such.

[gajrajgchouhan]

#13918 (comment)

This worked for me !! We need to have a 404 page it seems, you can also see the 404 error in chrome-dev-tools console too.

[noahgary]

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

[cigzigwon]

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.

[dko-slapdash]

@cigzigwon Can you please add more details on your message? How exactly did you solve the problem?

[fr4ct1ons]

If anyone using WSL2 reaches this thread after googling about hot reloading not working, I'd just like to leave my two cents and say that @seandearnaley 's answer really helped me. Not only it fixed my issue, but it also made the project incredibly faster. I don't know if I was wrong in storing my project on mnt/c/ but in any case, using the home folder did it.
Thanks, Sean!

[cigzigwon]

@dko-slapdash Ummm. Facepalm.

[saarangsoltani]

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 🙏🏻 🤦🏼‍♂️

[cigzigwon]

Guess what? Try using Mapbox SDK V2. I think my HMR is broken again and my guess is that it's all related to babel. Out of the box Gatsby seems to have issues with HMR when you either customize babel or avoid transpiring like with Mapbox. This sucks.

[cigzigwon]

So after spending an hour doing a yarn upgrade and patching nothing happened. So I looked a a problem page that didn't load mapbox and what I found is that I have a list of events outside of the page component which is an array of objects with a gatsby <StaticImage/ > tag in it. I just moved that list into the component and it works now! So something similar might be the issue on the mapbox page or that page is going to be an altogether different issue.

[cigzigwon]

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.

[seshaljain]

gatsby clean
gatsby build
gatsby develop

worked for me too

[EL-MEHDI-ESSAADI]

Is hot reloading working in windows with Gatsby, or I have to use Linux?

[EL-MEHDI-ESSAADI]

I fixed hot refreshing by removing the following option from gatsby-config.js :

   flags: {
      DEV_SSR: true,
   },

[Kishanjay]

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.

[Saatvik-droid]

So I was facing the same issue while running on C drive mount in WSL2. The solution that worked was adding WATCHPACK_POLLING=TRUE to the develop script.

'develop':'WATCHPACK_POLLING=TRUE gatsby develop'