1

几天前，我开始担任新的开发人员角色，并进行了一些环境更改以适应工作。从那时起，我的热重载/快速刷新就完全停止工作了。即使我手动刷新页面，更改也不会显示。仅当我停止开发服务器并使用“npm run dev”重新启动它时才显示更改。右下角的三角形指示器应该是活动的，显示窗口的活动重新加载（这也不再一致地显示，如果确实如此，页面将重新加载，但可惜建议的更改不可见）

语境：

  • 它对我的所有 NextJS 和 react 应用程序都有这种影响。即使在 NextJS 示例页面上运行一个基本的项目模板，也不会显示热重载工作。
  • 我研究了这个问题，似乎错误的导入（例如使用小写导入组件或页面目录中的文件被大写）可能会导致这种情况，但我梳理了代码并没有发现任何问题（当然，我可能会错过它但我的代码库有 300 多个文件）。
  • 后台的服务人员可能会导致问题，但我清除了浏览器中的所有问题以确保它仍然无法解决问题。
  • 我安装了 ngrok 用于工作目的的隧道，并安装了 docker-compose 来处理工作开发。环境。
  • 确保我使用的是最新的 Next 版本。甚至删除了 node_modules 并运行了 npm install。删除 .next 和 out 文件夹，仍然没有运气。

有人对我接下来应该尝试什么有任何想法或线索吗？它与我为工作而安装的东西有关吗？与 VS 代码或 WSL2 相关的东西？似乎很令人费解，它只是在一夜之间发生的。感谢您的任何见解或建议！

系统信息 操作系统：Windows（VS 代码的 WSL2 虚拟化） 浏览器：Chrome Next.js 版本：10.0.3 Node.js 版本：14.8.0 部署：npm run dev 用于开发工作；为 AWS 托管放大发布

4

5 回答 5

4

问题在于 WSL2。我在 VS Code 中使用 WSL2；这是Linux环境下的一次大的性能升级。问题是 WSL2 实际上处于“虚拟化”状态，因此无法同时从 VS Code 和浏览器（localhost:3000）发送信息。

这是他们正在解决的一个大问题，目前还没有解决办法。这就是为什么快速刷新不起作用的原因，因为 localhost 没有接收到所做的更改。通过代理或恢复到 WSL1 https://github.com/microsoft/WSL/issues/4769

OP在问题部分提供的解决方案

于 2021-02-26T05:05:55.537 回答
1

将.env文件或.env.local文件添加到您的根目录，然后将这一行放在上面：

WATCHPACK_POLLING=true

现在，重新启动您的服务器。

于 2022-02-01T21:10:41.750 回答
1

如果您以管理员身份运行 Poweshell 并运行

wsl.exe -l -v

这将为您提供运行发行版的 wsl 版本。

我个人使用的是 Ubuntu，这是输出

Ubuntu Running 2 docker-desktop Stopped 2 docker-desktop-data Stopped 2

要切换到 wsl 1，

跑 wsl.exe --set-version Ubuntu 1

如果你想切换回来，运行， wsl.exe --set-version Ubuntu 2。

这对我有用。

于 2021-03-24T01:23:11.267 回答
0

在我的反应项目中，我只需在.env根项目文件夹的文件中添加值

FAST_REFRESH=false  
CHOKIDAR_USEPOLLING=true

它有效！请享用！

于 2021-06-06T00:58:12.270 回答
0

谢谢我在 WSL2 上遇到了同样的问题。我只是切换到Windows终端，它可以工作。

于 2021-02-26T05:01:02.300 回答