时间戳

首页 > 解决方案 > 如何使用 VS Code devcontainers 在 react.js 中设置热重载

reactjs - 如何使用 VS Code devcontainers 在 react.js 中设置热重载

问题描述

我开始学习反应。我通常的设置是带有基于 Docker 的开发容器的 VS Code。我使用 create-react-app 创建了一个非常简单的应用程序，我可以使用它。但不知何故，热重载不起作用。任何想法可能是什么问题？

现在，我使用一个非常基本的 Dockerfile

FROM node:14.17.0

我的 .devcontainer 也很简单

{
"name": "Try React",
"dockerFile": "Dockerfile",
"runArgs": ["-u", "node"],
}

我的浏览器控制台显示

[HMR] Waiting for update signal from WDS..

正如预期的那样。但是当我保存文件时没有任何反应。

标签： reactjstypescriptdockervisual-studio-codevscode-devcontainer

解决方案

添加标志CHOKIDAR_USEPOLLING=true以便在容器内检测到文件更改。

你可以；

  • CHOKIDAR_USEPOLLING=true npm run start从命令行
  • 添加CHOKIDAR_USEPOLLING=true到项目根文件夹中的 .env 文件
  • export CHOKIDAR_USEPOLLING=true作为环境变量
  • "start": "CHOKIDAR_USEPOLLING=true react-scripts start"到你的 package.json

这在使用靶心和 React 17 的 vscode 开发容器中对我有用

推荐阅读