Gatsby 热重载在 Hello World 起始项目中无法重新加载

Question

描述

我正在按照此处的说明进行操作：https://www.gatsbyjs.org/tutorial/part-one/，但是当我启动开发服务器并更改src/pages/index.js时，浏览器中未进行热重载。

---

重现步骤

使用gatsby-cli:

• gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
• cd hello-world
• gatsby develop
• 更改src/pages/index.js中的div内文本

---

期望结果

页面应自动重新加载新文本。

---

实际结果

除非在浏览器中手动刷新，否则页面不会更改。

---

规格

操作系统: 运行在Windows 10 Pro上的WSL Ubuntu 18.04.3 LTS

Node: 12.12.0

NPM: 6.11.3

Gatsby CLI: 2.8.8

Gatsby: 2.17.6

浏览器: Chrome 77.0.3865.120, IE 11.1006.17134.0, Firefox 70.0

---

我尝试了多个浏览器，但结果相同。因此，我在Firefox中运行了开发工具，并在进行更改时检查了控制台输出，发现以下错误：

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/commons.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

我也在github和这里搜索了一下，但没有找到解决我的问题的办法。如果您有任何解决方法、建议或有关为什么这对我不起作用的见解，将不胜感激！

- cody-fisher

Answer 1

我曾经也遇到同样的问题。每当我更改文件时，Gatsby Develop热重载无法正常工作，此外，Gatsby Develop编译代码并启动开发服务器非常缓慢。后来我发现，如果我在Linux目录结构中创建我的Gatsby项目，而不是在Windows中，一切都能很好地运行且速度飞快。因此，我的解决方案如下。

在WSL中的/home/<your_username>目录中创建您的项目。只需转到/home/<your_username>并在其中创建一个文件夹mkdir；进入该文件夹，然后在其中运行Gatsby create my_project命令。

这样，您的项目将驻留在Linux目录结构中，使一切都能顺利运行。

- DarthWader

Answer 2

我今天遇到了类似的情况。以下步骤使其工作，但警告消息在控制台中仍然存在。

1. 删除 package.lock.json 和 node_modules 文件夹
2. 删除 C:\Users\\AppData\Roaming\npm 和 npm-cache 内部的内容
3. 执行 npm i 命令。

- Sunny Prakash

Answer 3

我在Windows上运行gatsby develop。 尝试了许多方法，包括wsl，npm clenaup等，我意识到我的杀毒软件 sophos 正在阻止webpack hot reload socket __webpack_hmr 。

我所要做的就是暂时禁用杀毒软件。 （您可以自由卸载它或更改为另一个）。

希望对您有效;)

- Alberto S.