メインコンテンツにスキップ

トラブルシューティング

npm start が変更を検知しない​

npm start の実行中にファイルを保存すると、ブラウザは更新されたコードでリフレッシュされるはずです。

これが発生しない場合は、以下のいずれかの回避策を試してください。

  • エントリポイントによってファイルがインポートされていることを確認してください。 TypeScriptはソースファイルのいずれかでエラーを表示しますが、webpackはエントリポイントのいずれかによって直接的または間接的にインポートされている場合にのみファイルをリロードします。
  • プロジェクトがDropboxフォルダにある場合は、フォルダから移動してみてください。
  • ウォッチャーがindex.jsというファイルを見つけられず、フォルダ名で参照している場合は、webpackのバグにより、ウォッチャーを再起動する必要があります。
  • VimやIntelliJなどの一部のエディタには、現在ウォッチャーを壊してしまう「安全な書き込み」機能があります。 この機能を無効にする必要があります。「テキストエディタの調整」の手順に従ってください。
  • プロジェクトパスに括弧が含まれている場合は、プロジェクトを括弧のないパスに移動してみてください。これは、webpackウォッチャーのバグが原因です。
  • LinuxとmacOSでは、より多くのウォッチャーを許可するためにシステム設定を調整する必要がある場合があります。
  • プロジェクトが(Vagrantでプロビジョニングされた)VirtualBoxなどの仮想マシン内で実行されている場合は、プロジェクトディレクトリに.envファイルが存在しない場合は作成し、CHOKIDAR_USEPOLLING=trueを追加してください。 これにより、次回`npm start`を実行すると、VM内で必要なポーリングモードが使用されます。

これらの解決策がいずれも役に立たない場合は、このスレッドにコメントを残してください。

監視エラーにより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

その後、ターミナルに貼り付けてEnterキーを押して実行します。 詳細については、こちらをご覧ください。

npm test が macOS Sierra でハングまたはクラッシュする​

npm testを実行し、コンソールにreact-scripts testを出力した後にコンソールが停止した場合は、Watchmanのインストールに問題がある可能性があります(facebook/create-react-app#713を参照)。

最初に、プロジェクト内のnode_modulesを削除し、npm install(またはyarnを使用している場合はyarn)を実行することをお勧めします。 それでも解決しない場合は、これらのissueに記載されている多数の回避策のいずれかを試すことができます

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使用量が数百メガバイト増加する可能性があるため、使用可能なメモリが1GB未満の場合は、ビルドが次のメッセージで失敗する可能性があります

プロセスが途中で終了したため、ビルドに失敗しました。 これはおそらく、システムのメモリが不足したか、プロセスで誰かが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 が縮小に失敗する​

react-scripts@2.0.0より前では、この問題は、サードパーティのnode_modulesが最新のJavaScript機能を使用していたために発生していました。これは、ミニファイアーがビルド中にそれらを処理できなかったためです。これは、react-scripts@2.0.0以降でnode_modules内の標準の最新のJavaScript機能をコンパイルすることで解決されました。

このエラーが表示される場合は、古いバージョンのreact-scriptsを使用している可能性があります。 最新の構文を使用する依存関係を回避するか、react-scripts@>=2.0.0にアップグレードして、変更ログの移行手順に従うことで、この問題を解決できます。