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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/43274925/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 01:48:24  来源:igfitidea点击:

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

javascriptreactjscreate-react-app

提问by elpddev

I am following a tutorialon React using create-react-app. The application is created by create-react-appv1.3.0

我正在关注使用 create-react-app 的 React教程。应用由create-react-appv1.3.0创建

create-react-app my-app

The dev server is run by

开发服务器由

npm start

After changing the code several times, the browser is not updated live / hot reload with the changes. Refreshing the browser does not help. Only stopping the dev server and starting it over again capture the new changes to the code.

多次更改代码后,浏览器不会实时更新/热重新加载更改。刷新浏览器无济于事。只有停止开发服务器并重新启动它才能捕获对代码的新更改。

采纳答案by Dan Abramov

Have you seen the “Troubleshooting” section of the User Guide?
It describes a few common causes of this problem:

您是否看过用户指南的“疑难解答”部分?
它描述了此问题的一些常见原因

When you save a file while npm startis 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.jsand you're referencing it by the folder name, you need to restart the watcherdue 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 settingsto allow more watchers.
  • If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .envfile in your project directory if it doesn't exist, and add CHOKIDAR_USEPOLLING=trueto 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.

当您在npm start运行时保存文件时,浏览器应使用更新后的代码刷新。

如果这没有发生,请尝试以下解决方法之一:

  • 如果您的项目在 Dropbox 文件夹中,请尝试将其移出。
  • 如果观察者没有看到被调用的文件,index.js而您通过文件夹名称引用它,则由于 Webpack 错误,您需要重新启动观察者
  • 一些像 Vim 和 IntelliJ 这样的编辑器有一个“安全写入”功能,目前会破坏观察者。您将需要禁用它。按照“在 vim 中禁用交换文件创建”中的说明进行操作。
  • 如果您的项目路径包含括号,请尝试将项目移动到没有括号的路径。这是由Webpack watcher bug引起的。
  • 在 Linux 和 macOS 上,您可能需要调整系统设置以允许更多观察者。
  • 如果项目在虚拟机中运行,例如(Vagrant 配置的)VirtualBox,.env如果它不存在,请在项目目录中创建一个文件,然后添加CHOKIDAR_USEPOLLING=true到其中。这可确保下次运行时npm start,观察程序在 VM 内根据需要使用轮询模式。

如果这些解决方案都没有帮助,请在此线程中发表评论。

I hope this helps!

我希望这有帮助!

回答by JiN

Have you tried npm start with super user permissions? I had the issue with my project and I solved it like this.

您是否尝试过 npm start 具有超级用户权限?我的项目有问题,我是这样解决的。

$sudo bash
#npm  start

回答by Sudarshana Dayananda

In my case, it was there are not enough number of file watchers. I have to change the configurations manually.

就我而言,是因为文件观察者数量不足。我必须手动更改配置。

See active file watchers limit using below command on terminal.

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

cat /proc/sys/fs/inotify/max_user_watches

Add below line to the /etc/sysctl.conffile.

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

fs.inotify.max_user_watches = 524288

Apply changes using the command below.

使用以下命令应用更改。

sudo sysctl -p

回答by champion-runner

Try using this command

尝试使用此命令

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

If still, the error is there then you need to remove your node modules and again

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

npm install

and then

进而

npm start

回答by sachin waghmare

Instead of

代替

npm start

Run with administration permission in Linux

在 Linux 中使用管理权限运行

sudo npm start

回答by Vusal Hasanov

You might wanna add -w to {"start": "react-scripts start -w"}. I had the same issue, fixed by adding --watch.

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

回答by Benbout62

If you are on linux, check if it works with root access. If it does, stop your server and disable enforcement (for more details, man selinux).

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

sudo setenforce 0

Start your server again (without root), it might work.

再次启动您的服务器(没有 root),它可能会工作。

回答by Sinister Beard

I came up against this same problem when starting the server through npm run start. When I changed it to npm start, it worked as expected.

我在通过npm run start. 当我将其更改为 时npm start,它按预期工作。

回答by Samarth Keskar

push your commited changes to the branch and then delete the local repo folder then clone the repo again and run npm installor yarn installwhichever you prefer. this workaround solved my issue

将您提交的更改推送到分支,然后删除本地 repo 文件夹,然后再次克隆 repo 并运行npm installyarn install以您喜欢的方式运行。这个解决方法解决了我的问题

回答by vinson

For Linux system you can try

对于Linux系统,您可以尝试

sudo npm start