Description

I am following along with the instructions here: / When I start the dev server and make a change to src/pages/index.js it is not hot reloaded in my browser.

---

Steps to Reproduce

Using gatsby-cli:

• gatsby new hello-world
• cd hello-world
• gatsby develop
• change the text inside of the div in src/pages/index.js

---

Expected Result

Page would automatically reload with new text.

---

Actual Result

Page would not change unless a manual refresh was applied in the browser.

---

Specs

OS: Ubuntu 18.04.3 LTS running in WSL on Windows 10 Pro

Node: 12.12.0

NPM: 6.11.3

Gatsby CLI: 2.8.8

Gatsby: 2.17.6

Browsers: Chrome 77.0.3865.120, IE 11.1006.17134.0, Firefox 70.0

---

I've tried multiple browsers with the same result so I ran devtools in firefox and examined the console output when I make a change and I see this error:

The connection to http://localhost:8000/__webpack_hmr was interrupted while the page was loading. client.js:88
[HMR] Update check failed: hotDownloadManifest/</request.onreadystatechange@http://localhost:8000/mons.js:42:16
process-update.js:147
Error: Manifest request to /d528b21bff3fd2caa92d.hot-update.json timed out. bootstrap:41
Firefox can’t establish a connection to the server at http://localhost:8000/__webpack_hmr. client.js:88

I've also looked around on github and here and haven't found a solution to my problem. Any ideas on a workaround, solution, or insight into why this might not be working for me would be greatly appreciated!

Description

I am following along with the instructions here: https://www.gatsbyjs/tutorial/part-one/ When I start the dev server and make a change to src/pages/index.js it is not hot reloaded in my browser.

---

Steps to Reproduce

Using gatsby-cli:

• gatsby new hello-world https://github./gatsbyjs/gatsby-starter-hello-world
• cd hello-world
• gatsby develop
• change the text inside of the div in src/pages/index.js

---

Expected Result

Page would automatically reload with new text.

---

Actual Result

Page would not change unless a manual refresh was applied in the browser.

---

Specs

OS: Ubuntu 18.04.3 LTS running in WSL on Windows 10 Pro

Node: 12.12.0

NPM: 6.11.3

Gatsby CLI: 2.8.8

Gatsby: 2.17.6

Browsers: Chrome 77.0.3865.120, IE 11.1006.17134.0, Firefox 70.0

---

I've tried multiple browsers with the same result so I ran devtools in firefox and examined the console output when I make a change and I see this error:

The connection to http://localhost:8000/__webpack_hmr was interrupted while the page was loading. client.js:88
[HMR] Update check failed: hotDownloadManifest/</request.onreadystatechange@http://localhost:8000/mons.js:42:16
process-update.js:147
Error: Manifest request to /d528b21bff3fd2caa92d.hot-update.json timed out. bootstrap:41
Firefox can’t establish a connection to the server at http://localhost:8000/__webpack_hmr. client.js:88

I've also looked around on github and here and haven't found a solution to my problem. Any ideas on a workaround, solution, or insight into why this might not be working for me would be greatly appreciated!

• javascript
• reactjs
• webpack-dev-server
• gatsby
• windows-subsystem-for-linux

Share Follow asked Oct 31, 2019 at 14:52 cody-fishercody-fisher 4511 silver badge55 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I was having same problems. Gatsby Develop hot reload was not working whenever I made changes to files, plus, Gatsby Develop was terribly slow to pile code and get the dev server up and running. I found out that if I create my Gatsby project in Linux directory structure instead of Windows, everything works out good and is blazing fast. So my solution was following.

Create your project in /home/<your_username> directory in WSL. Simply go to /home/<your_username> and make a folder there with mkdir; go to that folder and then run Gatsby create my_project mand in that folder.

That way your project will reside in Linux directory structure, making everything run smoothly.

I faced the similar scenario today. Below steps made it work however warning message is persistent in the console.

1. Delete package.lock.json and node_modules folder
2. Delete the content present inside C:\Users\\AppData\Roaming\npm and npm-cache
3. Do a npm i.

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 ;)