Skip to main content

故障排除

npm start 未检测到更改​

¥npm start doesn’t detect changes

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

¥When you save a file while npm start is running, the browser should refresh with the updated code.

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

¥If this doesn’t happen, try one of the following workarounds:

  • 检查你的文件是否由你的入口点导入。TypeScript 会在你的任何源文件上显示错误，但 webpack 只会重新加载你的文件，如果它们是由你的一个入口点直接或间接导入的。

    ¥Check that your file is imported by your entrypoint. TypeScript will show errors on any of your source files, but webpack only reloads your files if they are directly or indirectly imported by one of your entrypoints.

  • 如果你的项目在 Dropbox 文件夹中，请尝试将其移出。

    ¥If your project is in a Dropbox folder, try moving it out.

  • 如果监视器没有看到名为 index.js 的文件，而你通过文件夹名称引用它，则由于 webpack 错误，你 需要重启监视器。

    ¥If the watcher doesn’t see a file called index.js and you’re referencing it by the folder name, you need to restart the watcher due to a webpack bug.

  • Vim 和 IntelliJ 等一些编辑器具有“安全写入”功能，目前该功能会破坏观察者。你将需要禁用它。按照 “调整你的文本编辑器” 中的说明进行操作。

    ¥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 “Adjusting Your Text Editor”.

  • 如果你的项目路径包含括号，请尝试将项目移动到没有括号的路径。这是由 webpack 监视器错误 引起的。

    ¥If your project path contains parentheses, try moving the project to a path without them. This is caused by a webpack watcher bug.

  • 在 Linux 和 macOS 上，你可能需要 调整系统设置 以允许更多监视器。

    ¥On Linux and macOS, you might need to tweak system settings to allow more watchers.

  • 如果项目在虚拟机（如 Vagrant 配置的）VirtualBox 中运行，则在项目目录中创建一个 .env 文件（如果不存在），然后将 CHOKIDAR_USEPOLLING=true 添加到其中。这可确保下次运行 npm start 时，监视程序会根据需要在 VM 内使用轮询模式。

    ¥If the project runs inside a virtual machine such as (a Vagrant provisioned) VirtualBox, create an .env file in your project directory if it doesn’t exist, and add CHOKIDAR_USEPOLLING=true to 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 由于监视错误而失败​

¥npm start fail due to watch error

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

¥If you are using a Linux operating system and see an error similar to: ENOSPC: System limit for number of file watchers reached, you can fix the issue by increasing the fs.inotify.max_user_watches setting of your operating system.

如果你正在运行 Debian、RedHat 或其他类似的 Linux 发行版，请在终端中运行以下命令：

¥If you are running Debian, RedHat, or another similar Linux distribution, run the following in a terminal:

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

如果你正在运行 ArchLinux，请改为运行以下命令：

¥If you are running ArchLinux, run the following command instead:

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

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

¥Then paste it in your terminal and press on enter to run it. You could find more information here.

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

¥npm test hangs or crashes on macOS Sierra

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

¥If you run npm test and the console gets stuck after printing react-scripts test to the console there might be a problem with your Watchman installation as described in facebook/create-react-app#713.

我们建议先删除项目中的 node_modules 并运行 npm install（或 yarn，如果你使用的话）。如果没有帮助，你可以尝试以下问题中提到的众多解决方法之一：

¥We recommend deleting node_modules in your project and running npm install (or yarn if you use it) first. If it doesn't help, you can try one of the numerous workarounds mentioned in these issues:

据报道，安装 Watchman 4.7.0 或更新版本可解决此问题。如果你使用 Homebrew，你可以运行这些命令来更新它：

¥It is reported that installing Watchman 4.7.0 or newer fixes the issue. If you use Homebrew, you can run these commands to update it:

watchman shutdown-server
brew update
brew reinstall watchman

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

¥You can find other installation methods on the Watchman documentation page.

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

¥If this still doesn’t help, try running launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist.

也有报告说卸载 Watchman 可以解决这个问题。因此，如果没有其他帮助，请将其从系统中删除并重试。

¥There are also reports that uninstalling Watchman fixes the issue. So if nothing else helps, remove it from your system and try again.

npm run build 退出太早​

¥npm run build exits too early

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

¥It is reported that npm run build can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message:

构建失败，因为进程退出得太早。这可能意味着系统内存不足或有人在进程中调用了 kill -9。

¥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.

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

¥If you are completely sure that you didn't terminate the process, consider adding some swap space to the machine you’re building on, or build the project locally.

npm run build 在 Heroku 上失败​

¥npm run build fails on Heroku

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

¥This may be a problem with case sensitive filenames. Please refer to this section.

缺少 Moment.js 语言环境​

¥Moment.js locales are missing

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

¥If you use a Moment.js, you might notice that only the English locale is available by default. This is because the locale files are large, and you probably only need a subset of all the locales provided by Moment.js.

要将特定的 Moment.js 区域设置添加到你的包中，你需要显式导入它。

¥To add a specific Moment.js locale to your bundle, you need to import it explicitly.

例如：

¥For example:

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

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

¥If you are importing multiple locales this way, you can later switch between them by calling moment.locale() with the locale name:

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

// ...

moment.locale('fr');

这仅适用于之前明确导入的语言环境。

¥This will only work for locales that have been explicitly imported before.

npm run build 压缩失败​

¥npm run build fails to minify

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

¥Before react-scripts@2.0.0, this problem was caused by third party node_modules using modern JavaScript features because the minifier couldn't handle them during the build. This has been solved by compiling standard modern JavaScript features inside node_modules in react-scripts@2.0.0 and higher.

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

¥If you're seeing this error, you're likely using an old version of react-scripts. You can either fix it by avoiding a dependency that uses modern syntax, or by upgrading to react-scripts@>=2.0.0 and following the migration instructions in the changelog.