根据工作要求调整环境后，热重载停止工作答案

【问题标题】：Hot reload stopped working after adjusting environment for work requirements根据工作要求调整环境后，热重载停止工作
【发布时间】：2021-03-29 06:28:36
【问题描述】：

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

上下文：

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

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

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

【问题讨论】：

标签： reactjs next.js hot-reload fast-refresh

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

现在可以与 WSL-Remote 一起使用吗？还;代理通过是什么意思？

【解决方案3】：

如果你以管理员身份运行 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.

这对我有用。

【讨论】：

【解决方案4】：

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

FAST_REFRESH=false  
CHOKIDAR_USEPOLLING=true

它有效！享受吧！

【讨论】：