跳至主要内容

疑难解答

npm start 无法检测到更改

当你在运行 npm start 时保存文件,浏览器应该会刷新并显示更新后的代码。

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

  • 检查你的文件是否被你的入口文件导入。TypeScript 会在你的任何源文件中显示错误,但 webpack 只有在你的文件直接或间接被你的入口文件之一导入时才会重新加载你的文件。
  • 如果你的项目位于 Dropbox 文件夹中,请尝试将其移出。
  • 如果监视器没有看到名为 index.js 的文件,而你通过文件夹名称引用它,则你需要重新启动监视器,因为这是一个 webpack 错误。
  • 一些编辑器,如 Vim 和 IntelliJ,具有“安全写入”功能,目前会破坏监视器。你需要禁用它。请按照“调整你的文本编辑器”中的说明操作。
  • 如果您的项目路径包含括号,请尝试将项目移到没有括号的路径。这是由webpack 观察器错误引起的。
  • 在 Linux 和 macOS 上,您可能需要调整系统设置以允许更多观察器。
  • 如果项目运行在虚拟机中,例如(Vagrant 配置的)VirtualBox,请在您的项目目录中创建一个.env文件(如果不存在),并在其中添加CHOKIDAR_USEPOLLING=true。这将确保您下次运行npm start时,观察器将使用轮询模式,这在虚拟机中是必要的。

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

npm start 由于观察错误而失败

如果您使用的是 Linux 操作系统,并且看到类似于以下的错误:ENOSPC: System limit for number of file watchers reached,您可以通过增加操作系统的fs.inotify.max_user_watches设置来解决此问题。

如果您运行的是 Debian、RedHat 或其他类似的 Linux 发行版,请在终端中运行以下命令

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

如果您运行的是 ArchLinux,请改为运行以下命令

echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

然后将其粘贴到您的终端中,并按回车键运行它。您可以在此处找到更多信息。

npm test 在 macOS Sierra 上挂起或崩溃

如果您运行npm test,并且控制台在将react-scripts test打印到控制台后卡住,那么您的Watchman安装可能存在问题,如facebook/create-react-app#713中所述。

我们建议您删除项目中的node_modules,并运行npm install(如果您使用的是yarn,则运行yarn)。如果这没有帮助,您可以尝试这些问题中提到的众多解决方法之一

据报道,安装 Watchman 4.7.0 或更高版本可以解决此问题。如果您使用 Homebrew,您可以运行以下命令进行更新

watchman shutdown-server
brew update
brew reinstall watchman

您可以在 Watchman 文档页面上找到 其他安装方法

如果这仍然没有帮助,请尝试运行 launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist

也有报道称 *卸载* Watchman 可以解决此问题。因此,如果其他方法都无效,请从您的系统中删除它,然后重试。

npm run build 退出过早

据报道,npm run build 可能会在内存有限且没有交换空间的机器上失败,这在云环境中很常见。即使是小型项目,此命令也会将系统中的 RAM 使用量增加数百兆字节,因此,如果您可用的内存少于 1 GB,您的构建很可能会失败,并显示以下消息

构建失败,因为进程过早退出。这可能意味着系统内存不足,或者有人对进程调用了 kill -9

如果您完全确定没有终止进程,请考虑 在您正在构建的机器上添加一些交换空间,或者在本地构建项目。

npm run build 在 Heroku 上失败

这可能是由于文件名区分大小写造成的。请参考 此部分

Moment.js 本地化文件丢失

如果您使用的是 Moment.js,您可能会注意到默认情况下只有英文语言环境可用。这是因为语言环境文件很大,您可能只需要 Moment.js 提供的所有语言环境 的一个子集。

要将特定的 Moment.js 语言环境添加到您的包中,您需要显式导入它。

例如

import moment from 'moment';
import 'moment/locale/fr';

如果您以这种方式导入多个语言环境,您可以在以后通过使用语言环境名称调用 moment.locale() 在它们之间切换

import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/es';

// ...

moment.locale('fr');

这仅适用于之前已显式导入的语言环境。

npm run build 无法压缩

[email protected] 之前,这个问题是由第三方 node_modules 使用现代 JavaScript 功能造成的,因为压缩器在构建过程中无法处理它们。这个问题已在 [email protected] 及更高版本中通过在 node_modules 中编译标准现代 JavaScript 功能得到解决。

如果您看到此错误,您可能正在使用旧版本的 react-scripts。您可以通过避免使用现代语法的依赖项来修复它,或者升级到 react-scripts@>=2.0.0 并按照变更日志中的迁移说明进行操作。