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

时间：2017-04-07 09:47:26

标签： javascript reactjs create-react-app

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

创建 
create-react-app my-app

开发服务器由

运行 
npm start

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

27 个答案:

答案 0 :(得分：63)

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

我正在使用 React 17。

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

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

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

答案 1 :(得分：11)

在WSL2中为我工作，“如果项目在虚拟机（例如，由Vagrant提供的VirtualBox）中运行，请在项目目录中创建.env文件（如果不存在），然后添加{{ 1}}。这样可以确保您下次运行CHOKIDAR_USEPOLLING=true时，观察者可以在VM内根据需要使用轮询模式。”

或者直接运行： npm start

答案 2 :(得分：10)

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

  

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

     

如果没有发生这种情况，请尝试以下解决方法之一：

     
      
  • 如果您的项目位于Dropbox文件夹中，请尝试将其移出。
    •   
  • 如果观察者没有看到名为index.js的文件并且您按文件夹名称引用它，则由于Webpack错误而导致您need to restart the watcher。
    •   
  • 像Vim和IntelliJ这样的编辑有一个“安全写入”功能，目前打破观察者。你需要禁用它。按照“Working with editors supporting safe write”。
    • 中的说明操作   
  • 如果您的项目路径包含括号，请尝试将项目移动到没有它们的路径。这是由Webpack watcher bug。
    • 引起的   
  • 在Linux和macOS上，您可能需要tweak system settings才能允许更多观察者。
    •   
  • 如果项目在虚拟机（如Vagrant配置的）VirtualBox内运行，请在项目目录中创建.env文件（如果该文件不存在），并向其添加CHOKIDAR_USEPOLLING=true。这样可以确保下次运行npm start时，观察者会根据需要在VM中使用轮询模式。
    •   
     

如果这些解决方案都不起作用，请发表评论in this thread。

我希望这有帮助！

答案 3 :(得分：10)

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

$sudo bash
#npm  start

答案 4 :(得分：9)

就我而言，文件监视程序的数量不足。我必须手动更改配置。

在终端上使用以下命令查看活动文件监视程序的限制。

cat /proc/sys/fs/inotify/max_user_watches

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

fs.inotify.max_user_watches = 524288

使用以下命令应用更改。

sudo sysctl -p

答案 5 :(得分：5)

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

答案 6 :(得分：3)

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

FAST_REFRESH = false
CHOKIDAR_USEPOLLING=true

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

答案 7 :(得分：3)

找到您的index.js并更改此文件中的内容，例如添加空格，然后保存。 它应该在控制台中显示“正在编译...”。

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

npm似乎是在第一次寻找index.js中的更改，如果您重构文件夹结构，可能会丢失index.js。 强制在index.js文件中进行更新以解决问题。

至少这对我有用

答案 8 :(得分：1)

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

答案 9 :(得分：1)

编辑：这可能不是推荐的解决方案。该解决方案适用于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文件并更改react-scripts版本。

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

答案 10 :(得分：1)

如果上述方法均无效，请尝试在项目的基本路径中添加.env文件，然后在内部添加FAST_REFRESH = false

  • Linux Debian
  • 反应17
  • 反应片4

答案 11 :(得分：0)

我对如何创建 .env 文件感到困惑，即使我做了它仍然没有用。我能够通过在终端上运行此命令来解决该问题。

npm run start -FAST_REFRESH=false

希望对某人有所帮助。

答案 12 :(得分：0)

通过npm run start启动服务器时，我遇到了同样的问题。当我将其更改为npm start时，它可以正常工作。

答案 13 :(得分：0)

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

解决方案 1：

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

解决方案 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

答案 14 :(得分：0)

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

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 .如果您没有看到更改，请刷新浏览器选项卡。

答案 15 :(得分：0)

  1. 在 package.json 中，使用 "react-scripts": "3.4.4"

  2. 删除 package-lock.json

  3. 运行“rm -rf node_modules && npm install”

npm 启动

答案 16 :(得分：0)

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

<块引用>

cat /proc/sys/fs/inotify/max_user_watches

在我的情况下，它是 8192，所以我只是将其更改为 524288，它运行良好。

用于更改的命令是：

<块引用>

cd /proc/sys/fs/inotify 须藤纳米 max_user_watches

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

<块引用>

sudo sysctl -p

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

答案 17 :(得分：0)

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

答案 18 :(得分：0)

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

确保运行

  1. npm install，然后
  2. npm start

答案 19 :(得分：0)

如果您在反向代理/ nginx后面运行应用程序（例如，在本地启用https），则还需要启用websocket，以便它可以检测刷新：

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;
}

答案 20 :(得分：0)

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

sudo setenforce 0

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

答案 21 :(得分：0)

您可能想将-w添加到{“ start”：“ react-scripts start -w”}。 我有同样的问题，可以通过添加--watch来解决。

答案 22 :(得分：0)

尝试使用此命令

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

如果仍然存在错误，则需要再次删除节点模块

npm install

然后

npm start

答案 23 :(得分：-1)

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

答案 24 :(得分：-2)

在Chrome上安装插件Classic Cache Killer，可以100％解决该问题。

答案 25 :(得分：-3)

代替

npm start

具有管理权限运行 在Linux中

sudo npm start

答案 26 :(得分：-3)

对于Linux系统，您可以尝试

sudo npm start
相关问题
最新问题