create-react-app 的开发服务器不会自动刷新

Question

我正在使用 create-react-app 在 React 上关注 tutorial。该应用程序由 create-react-app v1.3.0

创建

create-react-app my-app

开发服务器是运行

npm start

多次更改代码后，浏览器不会随着更改实时更新/热重载。刷新浏览器没有帮助。只有停止开发服务器并重新启动它才能捕获对代码的新更改。

Answer 1

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

$sudo bash
#npm  start

Answer 2

您看过用户指南的“疑难解答”部分了吗？
它描述了 a few common causes of this problem:

When you save a file while npm start is running, the browser should refresh with the updated code.

If this doesn’t happen, try one of the following workarounds:

If your project is in a Dropbox folder, try moving it out.

If the watcher doesn’t see a file called index.js and you’re referencing it by the folder name, you need to restart the watcher due to a Webpack bug.

Some editors like Vim and IntelliJ have a “safe write” feature that currently breaks the watcher. You will need to disable it. Follow the instructions in “Disabling swap files creation in vim”.

If your project path contains parentheses, try moving the project to a path without them. This is caused by a Webpack watcher bug.

On Linux and macOS, you might need to tweak system settings to allow more watchers.

If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to it. This ensures that the next time you run npm start, the watcher uses the polling mode, as necessary inside a VM.

If none of these solutions help please leave a comment in this thread.

希望对您有所帮助！

Answer 3

如果您使用的是 linux，请检查它是否适用于 root 访问权限。如果是，请停止您的服务器并禁用强制执行（有关更多详细信息，man selinux）。

sudo setenforce 0

再次启动你的服务器（没有root），它可能会工作。

Answer 4

我在通过 npm run start 启动服务器时遇到了同样的问题。当我将其更改为 npm start 时，它按预期工作。

Answer 5

将您提交的更改推送到分支，然后删除本地存储库文件夹，然后再次克隆存储库，然后运行 npm install 或 yarn install 随您喜欢。这个解决方法解决了我的问题

Answer 6

对于Linux系统你可以试试

sudo npm start

Answer 7

在我的例子中，是没有足够数量的文件观察者。我必须手动更改配置。

在终端上使用以下命令查看活动文件观察者限制。

cat /proc/sys/fs/inotify/max_user_watches

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

fs.inotify.max_user_watches = 524288

使用以下命令应用更改。

sudo sysctl -p

Answer 8

尝试使用这个命令

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

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

npm install

然后是

npm start

Answer 9

您可能想将 -w 添加到 {"start": "react-scripts start -w"}。我有同样的问题，通过添加 --watch.

解决

Answer 10

而不是

npm start

运行具有管理权限在 Linux

sudo npm start

Answer 11

找到你的 index.js 并在此文件中更改一些内容，例如添加白色 space，然后保存。它应该在您的控制台中显示 "compiling..."。

然后您可以修改其他文件，react 会在保存时刷新。

npm 似乎是在第一时间寻找 index.js 中的更改，如果重构文件夹结构，可能会错过 index.js。 强制更新 index.js 文件解决问题。

至少这对我有用

Answer 12

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

Answer 13

在 WSL2 中为我工作，“如果项目运行在虚拟机中，例如（Vagrant 提供的）VirtualBox，则在项目目录中创建一个 .env 文件，如果它不存在的话” t 存在，并向其添加 CHOKIDAR_USEPOLLING=true。这可确保下次您运行 npm start 时，观察者根据需要在 VM 内使用轮询模式。“

或者只是运行： $ CHOKIDAR_USEPOLLING=true npm start

Answer 14

如果您运行您的应用在反向代理/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;
}

Answer 15

编辑：这可能不是推荐的解决方案。该解决方案适用于 Docker.

如果使用 docker 和卷安装，您需要在 src 文件夹中添加一个 .env 文件，其中包含命令 CHOKIDAR_USEPOLLING=true。然而，对我来说这引发了一个错误

/app/src/App.js: Cannot find module '@babel/parser'

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

注意：为了提供更多上下文，我正在使用 docker 并且 React 应用程序文件作为一个卷安装在 docker 图像中（以便制作应用中的更改会直接反映在应用中，无需重建 docker 图像）。上述解决方案基于 docker 社区中发布的其他解决方案，其中人们建议更改反应脚本版本。我不认为这应该是推荐的解决方案。但是，由于我正在做一个教程系列，所以我想节省时间并专注于其他事情。

Answer 16

使用 create-react-app 工具链创建新项目后

确保运行

npm install，然后
npm start

Answer 17

在项目的基本路径中添加一个.env文件并在里面添加FAST_REFRESH=false.

这会禁用快速刷新和returns 热重载。

如果您不想将 .env 文件添加到您的基本路径，您可以选择这些选项：

"start": "FAST_REFRESH=false react-scripts start"，在package.json.
FAST_REFRESH=false npm run start，在命令行上。
FAST_REFRESH=false，导出为环境变量。

React 17

React-scrits 4

Answer 18

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

我正在使用 React 17。

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

如果你的终端是Compiling...然后你在浏览器上看不到变化，你应该尝试在项目的根路径中添加一个.env文件并添加FAST_REFRESH=false.

默认情况下，热刷新已替换为快速刷新。

Answer 19

“依赖关系”：{ “反应”：“^ 17.0.1”， “反应脚本”：“4.0.1”， } 如果您使用的是这些版本，则在项目的根目录中创建 .env 文件并键入 FAST_REFRESH=false 并保存。然后 yarn start 或 npm start.

Answer 20

for linux 首先检查允许使用的文件数：

cat /proc/sys/fs/inotify/max_user_watches

我的是 8192，所以我将其更改为 524288，效果很好。

用于更改的命令是：

cd /proc/sys/fs/inotify sudo nano max_user_watches

然后把no改成524288 保存它然后使用此命令应用更改

sudo sysctl -p

引用自https://blog.jetbrains.com/idea/2010/04/native-file-system-watcher-for-linux/

Answer 21

在package.json中，使用“react-scripts”：“3.4.4”
删除包-lock.json
运行 "rm -rf node_modules && npm install"

npm 启动

Answer 22

花了几个小时解决这个问题：

1。创建一个 .env 文件（在 package.json 文件旁边）添加以下内容：

文件：.env

FAST_REFRESH=false

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

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

4。现在，更改 App.js

中的一些文本

文件：App.js

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

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

Answer 23

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

FAST_REFRESH = false
CHOKIDAR_USEPOLLING=true

我的设置不包括任何虚拟机（除非 WSL2 被视为虚拟机？）。尽管如此，带有上述两个条目的 .env 还是运行.

Answer 24

如果您正在使用 visual studio 代码，您可以创建一个新文件并将其另存为 .env。在里面，.env写FAST_REFRESH=false并保存。现在运行 npm start 这对我有用。

Answer 25

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

解决方案 1：

通过 WSL 共享访问这些文件，\wsl$\DISTRO_NAME 来自 Windows。

解决方案 2：

在你的package.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

Answer 26

我对如何创建 .env 文件感到困惑，即使我创建了它仍然无法正常工作。我能够在我的终端上通过运行这个命令解决这个问题。

npm run start -FAST_REFRESH=false

希望对某人有所帮助。

Answer 27

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

.env

FAST_REFRESH=false

Answer 28

注意将 .env 文件添加到的位置。当您调用 create-react-app app-name 时，React 将添加以下文件夹结构：

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

我的问题是，我在./root 目录下添加了.env 文件（里面有FAST_REFRESH=false）。将文件放在我的 ./app-name 文件夹中解决了这个问题。

Answer 29

如果有人来这里寻找更好的解决方案，我的问题已通过将我的文件移动到 WSL2 文件系统中得到解决。热重载立即生效，无需添加 .env 文件。

Answer 30

我最终来到这里寻找类似问题的答案。尽管我的页面特定于不是热重载的页面。我确实想指出这是使用 Nextjs，它是 /pages 下的一个名为 subscribe.js (/pages/subscribe.js)

的页面

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

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

import React from 'react'

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

函数名需要像这样以大写开头

import React from 'react'

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

正如他们所说，您每天都会学到新东西。在这个游戏中它更像是 10 件事，问题在于记住你学到的东西 ;)

Answer 31

我尝试了以上所有建议，但我的 React 应用程序仍然没有在代码更改时刷新。然后我复制了之前工作的 React 项目文件夹（仅前端）并将其粘贴到我开始的新项目中。删除了与旧项目相关的所有代码并开始使用它。这解决了我的问题。

如果这对你可行，你也可以采用同样的方法。如果有人发现新的简单解决方案，请在此处post。

create-react-app 的开发服务器不会自动刷新

Development server of create-react-app does not auto refresh

javascript

reactjs

create-react-app