Skip to main content

故障排除

npm start 未检测到更改​

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

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

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

如果这些解决方案都没有帮助，请发表评论 in this thread。

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

然后将其粘贴到你的终端中，然后按回车键运行它。 你可以找到更多信息 here。

npm test 在 macOS Sierra 上挂起或崩溃​

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

我们建议先删除项目中的 node_modules 并运行 npm install（或 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 上失败​

这可能是区分大小写的文件名的问题。 请参考 this section。

缺少 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 缩小失败​

在 react-scripts@2.0.0 之前，这个问题是由第三方 node_modules 使用现代 JavaScript 特性引起的，因为在构建过程中压缩器无法处理它们。 这已通过在 react-scripts@2.0.0 及更高版本中编译 node_modules 中的标准现代 JavaScript 功能来解决。

如果你看到此错误，你可能使用的是旧版本的 react-scripts。 你可以通过避免使用现代语法的依赖项或升级到 react-scripts@>=2.0.0 并按照更改日志中的迁移说明来修复它。