跳到主要内容

疑难解答

npm start 没有检测到变化

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

如果浏览器没有刷新,请尝试以下解决方法:

  • 检查你的入口是否已引入文件。TypeScript 将在你的任何源文件上显示错误,但是 webpack 只有在文件被某个入口直接或间接引入时才会重新加载文件。
  • 如果你的项目在 Dropbox 文件夹中,请尝试将其移出。
  • 如果你通过文件夹名称进行引用,但 watcher 没有在文件夹内找到名为 index.js 的文件,那么由于 Webpack 的 bug,你可能需要重启 watcher
  • 像 Vim 和 IntelliJ 这样的一些编辑器有一个“安全写入”的特性,这个特性目前会破坏 watcher。你需要禁用它,并按照 “调整文本编辑器”中的说明操作。
  • 如果项目路径包含圆括号,请尝试将项目移动到没有圆括号的路径。这是 Webpack watcher bug 导致的。
  • 在 Linux 和 macOS 上,你可能需要 调整系统设置 来允许更多 watcher。
  • 如果项目在虚拟机(例如,配置了 Vagrant 的 VirtualBox )中运行,请在项目目录中创建一个 .env 文件,如果该文件不存在,需要向其添加 CHOKIDAR_USEPOLLING=true 。 这样可以确保下次运行 npm start 时,watcher 根据需要在 VM 内部使用轮询模式。

如果这些解决方案均无帮助,请在 此 issues 中留言

npm test 在 macOS Sierra 上无效果

如果你运行 npm test ,并且在运行 react-scripts test 无反应,则你的 Watchman 安装可能存在问题,参见 facebook/create-react-app#713

我们建议首先删除项目中的 node_modules 并运行 npm install(或者运行 yarn)。 如果没有帮助,你可以尝试以下解决方法:

安装 Watchman 4.7.0 或更高版本可解决此问题。 如果使用 Homebrew,则可以运行以下命令对其进行更新:

watchman shutdown-server
brew update
brew reinstall watchman

你可以在 other installation methods 文档页面找到其他安装方法。

如果仍然不能解决问题,请尝试运行 launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist

也有说卸载 Watchman 可以解决这个问题。因此,如果没有其他解决方式,请将其从系统中删除,然后重试。

npm run build 过早结束

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

The build failed because the process exited too early. This probably means the system ran out of memory or someone called kill -9 on the process.

如果你确定没有终止该进程,请考虑在要构建的计算机上 添加一些交换空间,或在本地构建项目。

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 压缩失败

react-scripts@2.0.0 之前,此问题是由使用现代 JavaScript 功能的第三方 node_modules 引起的,因为 minifier 无法在构建过程中处理它们。通过在react-scripts@2.0.0 及更高版本中的 node_modules 中编译标准的现代 JavaScript 功能,可以解决此问题。

如果遇到这个错误,有可能是使用了旧版本的 react-scripts,你可以通过避免使用现代语法的依赖关系或通过升级到 react-scripts@>=2.0.0 并遵循更改日志中的迁移说明来修复此问题。