创建-反应-应用程序的开发服务器不会自动刷新

小开

您是否尝试过使用超级用户权限启动 npm？我的项目出了点问题，我就这样解决了。

$sudo bash
#npm  start

小开

最佳答案

你看过用户指南中的“故障诊断”部分吗？
它描述了这个问题的几个常见原因:

在运行 npm start时保存文件时，浏览器应刷新已更新的代码。

如果这种情况没有发生，请尝试下列变通方法之一:

如果您的项目在 Dropbox 文件夹中，请尝试将其移出。

如果观察者没有看到一个名为 index.js的文件，并且您正在通过文件夹名称引用它，那么由于 Webpack 错误，您就是需要重启观察者。

像 Vim 和 IntelliJ 这样的一些编辑器有一个“安全写作”的特性，这个特性目前已经破坏了观察者。你需要解除它。按照 “禁用在 vim 中创建交换文件”中的说明操作。

如果项目路径包含括号，请尝试将项目移动到不包含括号的路径。这是由网络包监视器引起的。

在 Linux 和 macOS 上，您可能需要使用调整系统设置调整系统设置来允许更多的观察者。

如果项目在虚拟机中运行，例如(Vagrant 提供的) VirtualBox，则在项目目录中创建一个不存在的 .env文件，并将 CHOKIDAR_USEPOLLING=true添加到该文件中。这样可以确保下次运行 npm start时，监视器使用轮询模式，这在 VM 中是必要的。

如果这些解决方案都没有帮助，请留下评论在这条线上。

希望这个能帮上忙！

小开

如果您使用的是 Linux，请检查它是否支持 root 访问。如果出现这种情况，请停止服务器并禁用执行(详细信息，请参阅 man selinux)。

sudo setenforce 0

重新启动您的服务器(没有 root) ，它可能会工作。

小开

我在通过 npm run start启动服务器时遇到了同样的问题。当我把它改为 npm start时，它正如预期的那样工作。

小开

将您提交的更改推送到分支，然后删除本地回购文件夹，然后再次克隆回购，并运行 npm install或 yarn install，无论您喜欢。这个变通方案解决了我的问题

小开

对于 Linux 系统，您可以尝试

sudo npm start

小开

在我的情况下，是因为没有足够的文件监视器。我必须手动更改配置。

请参阅活跃的文件监视器在终端上使用下面的命令的限制。

cat /proc/sys/fs/inotify/max_user_watches

将下面一行添加到 /etc/sysctl.conf文件。

fs.inotify.max_user_watches = 524288

使用下面的命令应用更改。

sudo sysctl -p

小开

尝试使用这个命令

echo fs.inotify.max_user_watches=524288
sudo tee -a /etc/sysctl.conf && sudo sysctl -p

如果仍然存在错误，那么您需要删除您的节点模块，并再次删除

npm install

然后

npm start

小开

您可能需要将-w 添加到{“ start”: “ response-script start-w”}。我也有同样的问题，通过加上... 手表解决了。

小开

而不是

npm start

使用管理员权限运行在 Linux 中

sudo npm start

小开

找到您的 index.js并在这个文件中修改一些内容，例如添加一个空白，然后保存。它应该在控制台中显示“编译...”。

然后可以修改其他文件，并在保存时进行反应刷新。

Npm 似乎是第一次在 index.js 中寻找变化，如果你重构文件夹结构，index.js 可能会被遗漏。强制在 index.js 文件中进行更新可以解决这个问题。

至少这对我有用

小开

我在 WSL 中运行 npm时遇到了这个问题。我的 Windows 桌面文件夹中有一个项目文件夹，在 WSL 中 npm 无法从该文件夹自动重新编译。
在 将项目文件夹移动到 WSL 的用户 home目录解决了这个问题之后。

小开

在 WSL2中，对我来说，“如果项目运行在虚拟机中，比如(Vagrant 提供的) VirtualBox 中，在项目目录中创建一个不存在的 .env文件，并将 CHOKIDAR_USEPOLLING=true添加到该文件中。这样可以确保下次运行 npm start时，监视器使用轮询模式，这在 VM 中是必要的。”

或者直接跑: $ CHOKIDAR_USEPOLLING=true npm start

小开

如果你使用反向代理/nginx 来运行你的应用程序(例如在本地启用 https) ，你还需要启用 websockets，这样它才能检测刷新:

location /sockjs-node {
proxy_pass http://dockerhost:5000/sockjs-node;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}

小开

编辑: 这可能不是一个推荐的解决方案。这个解决方案适用于 Docker。

如果使用带卷装入的 docker，则需要添加。Src 文件夹中的 env 文件，其中包含命令 CHOKIDAR_USEPOLLING=true。然而，对我来说这抛出了一个错误

/app/src/App.js: 无法找到模块“@babel/parser”

.要解决这个新的错误，可以将 package.json 文件中的 "react-scripts": "3.4.3"更改为 "react-scripts": "3.4.0"。因此，根据您的情况，您可能需要添加。Env 文件，并更改 response-script 版本。

注意: 更详细地说，我当时正在使用 docker，而且应用程序文件被作为一个卷挂载在 docker 图像中(这样应用程序中的更改可以直接反映在应用程序中，而无需重新构建 docker 图像)。上面的解决方案是基于在 docker 社区中发布的其他解决方案，其中人们建议更改响应脚本版本。我不认为这是一个值得推荐的解决方案。然而，因为我正在做一个系列教程，我想节省时间，并把重点放在其他事情上。

小开

在使用创建-反应-应用程序工具链创建新项目之后

一定要跑

那就 npm install
npm start

小开

在项目的基本路径中添加一个 .env文件，并在内部添加 FAST_REFRESH=false。

这将禁用快速刷新并返回热重新加载。

如果不想在基本路径中添加.env 文件，可以选择以下选项:

"start": "FAST_REFRESH=false react-scripts start"在包里 json。
FAST_REFRESH=false npm run start，在命令行上。
作为环境变量出口。

反应17

反应稿4

小开

我读了很多不必要的东西。

我正在使用 反应17。

我的问题是页面只添加了新的组件，但浏览器没有刷新页面。

如果您的终端是 Compiling...，然后您没有看到浏览器上的更改，您应该尝试在项目的根路径中添加一个 .env文件，并添加 FAST_REFRESH=false。

默认情况下，“快速刷新”替换了“热刷新”。

小开

「相依性」 : { “反应”: “ ^ 17.0.1”, “反应脚本”: “4.0.1”, } 如果您使用这些版本，然后创建。并键入 FAST _ REFRESH = false 保存它。然后纱线开始或 npm 开始。

小开

对于 linux，首先使用以下命令检查允许的文件数:

Cat/proc/sys/fs/inotify/max _ user _ watch

在我的，它是8192，所以我只是把它改成524288，它工作得很好。

用于更改的命令是:

Cd/proc/sys/fs/inotify Sudo nano max _ user _ watch

然后改为524288 保存它，然后使用此命令应用更改

Sudo sysctl-p

参考 https://blog.jetbrains.com/idea/2010/04/native-file-system-watcher-for-linux/

小开

在 package.json 中，使用“ response-script”: “3.4.4”
删除包锁定 json
运行“ rm-rf node _ module & & npm install”

NPM 开始

小开

花了几个小时修复这个:

1. 创建一个文件. env (在 package.json 文件旁边)添加以下内容:

文件: . env

FAST_REFRESH=false

2. 现在，停止并启动服务器

(Ctrl + C to start, if in CMD, on Windows OS)
npm start

现在，在 App.js 中修改一些文本

文件: App.js

from "Learn React"
to "Learn React And it's working"

注意:
1. 服务器重启很重要。
如果没有看到更改，请刷新浏览器选项卡。

小开

在 WSL2中的 win10上，我必须在根文件夹中创建. env，并包含两者

FAST_REFRESH = false
CHOKIDAR_USEPOLLING=true

我的设置不包括任何虚拟机(除非 WSL2被认为是 VM?).尽管如此。有上面两个条目的 env 已经启动并运行了。

小开

如果使用的是可视化工作室代码，则可以创建一个新文件并将其保存为 .env。在内部，.env写入 FAST_REFRESH=false并保存。然后，运行 npm start，这对我很有效。

小开

对于 WSL2的用户，请注意，如果您的项目在您的 Windows 系统中(即 C: 或 D:) ，那么它将无法工作。

解决方案1:

通过 WSL 共享 WSL $DISTRO _ NAME 访问这些文件。

解决方案2:

在你的包裹里 Json

找到

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

然后换成

"scripts": {
"start": "CHOKIDAR_USEPOLLING=true react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

学分到 https://github.com/facebook/create-react-app/issues/10253

小开

我对如何创建一个。Env 文件，即使我这样做，它仍然没有工作。我可以通过在终端上运行这个命令来修复这个问题。

npm run start -FAST_REFRESH=false

希望能帮到别人。

小开

只需在应用程序的根中创建 .env文件并添加以下内容

。 env

FAST_REFRESH=false

小开

当你调用 create-react-app app-name时，React 会添加以下文件夹结构:

./root
./app-name
./node_modules
./public
./src
package.json
README.md

我补充说，我的问题是。下的 env 文件(内含 FAST_REFRESH=false)。/根目录。将文件放入。/app-name 文件夹解决了这个问题。

小开

如果有人来这里寻找更好的解决方案，我的问题就可以通过将文件移动到 WSL2文件系统中来解决。热重新加载直接工作，不需要添加。Env 文件。

小开

我来这里寻找类似问题的答案。不过我的是专门针对一个没有热重载的页面。我想指出的是，这是在使用 Nextjs，它是在/pages 下面的一个页面，名为 subribe.js (/pages/subribe.js)

这是非常令人沮丧的，诚然，花了一段时间才弄明白。

这里有很多技术性的答案，但有趣的是，我的问题是我的功能组件没有以大写字母开头。

import React from 'react'


export default function subscribe() {
return (
<div>
      

</div>
)
}

哪里的函数名需要以这样的大写字母开头

import React from 'react'


export default function Subscribe() {
return (
<div>
      

</div>
)
}

就像他们说的，你每天都能学到新东西。在这个游戏里有10件事，麻烦的是记住你学到的东西;)

小开

我尝试了以上所有的建议，但仍然我的反应应用程序不刷新的代码更改。然后，我复制以前的工作反应项目文件夹(只是前端)粘贴到新的项目，我正在启动。删除所有与旧项目相关的代码并开始使用它。这解决了我的问题。

如果这对你来说是可行的，你也可以采用同样的方法。如果有人发现了一个新的简单的解决方案，请张贴在这里。

小开

从反应脚本版本5.x.x 开始，CHOKIDAR_USEPOLLING=true不再在。Env 文件。中使用 WATCHPACK_POLLING=true。在项目的根目录中放置 env 文件。按照这个线程。

小开

每次刷新应用程序时，我都必须运行 npm build。重新安装节点和 npm 没有帮助。该项目使用名为 Parcel 的生成工具。删除自动生成的文件，如 .parcel-cache和 dist为我解决了这个问题。

我的解决方案是删除自动生成的未跟踪/忽略文件: git status --ignored