web-dev-qa-db-ja.com

React Linuxでアプリのホットリロードの作成が常に機能するとは限りません

Create-react-appボイラープレートを使用して反応アプリケーションを作成しました。これは非常に人気があり、ホットリロードはファイルが変更されたときに更新され、時には更新されず、最小期間またはそのようなものがあるようです、私はm、Ubuntu、ノードバージョン7.0を使用して、package.jsonのスクリプトはnpm:'react-script start'私は何が欠けていますか？

node.jslinuxreactjscreate-react-app
21
challenger

Npm startが変更を検出しない場合、以下はcreate-react-appドキュメントで提供される一般的なトラブルシューティング手順です- link 。

アプリがnpm startで実行されており、エディターでコードを更新している間、borswerを更新されたコードで更新する必要があります。これが発生しない場合は、次の回避策のいずれかを試してください。

  1. プロジェクトファイルがDropboxやGoogleドライブなどのクラウドストレージからローカルシステムに直接同期されており、それらで直接アプリを実行しようとしている場合は、外に移動してみてください。
  2. Webpackのバグにより、 ウォッチャーを再起動する必要があります 。ウォッチャーがindex.jsを検出せず、フォルダー名で参照している場合。
  3. VimやIntelliJなどのエディターの安全な書き込み機能は、現在ウォッチャーを中断します。 無効にする にする必要があります。
  4. Webpack watcher bug のため、パスに括弧が含まれるプロジェクトでは問題が発生するため、プロジェクトを括弧のないパスに移動してみてください。 。
  5. LinuxおよびmacOSでより多くのウォッチャーを許可するには、 システム設定の調整 が必要になる場合があります。
  6. （Vagrantでプロビジョニングされた）VirtualBoxなどの仮想マシン内でプロジェクトを実行する場合、プロジェクトディレクトリに.envファイルが存在しない場合は作成し、CHOKIDAR_USEPOLLING=trueを追加します。これにより、次回npm startを実行するときに、必要に応じてVM内でウォッチャーがポーリングモードを使用するようになります。
  7. max_users_watches- リンク を増やしてみてください

その他の参照：

19
Keshan Nageswaran

これらを試してください：

  • IDEで安全な書き込みをオフにする
  • 増加する max_user_watches
  • パスには括弧を使用しないでください

最後の手段として、これをenv変数として使用してみてください：CHOKIDAR_USEPOLLING=true npm start

ソース： https://github.com/facebookincubator/create-react-app/issues/659https://github.com/facebookincubator/create-react-app/issues/ 1049＃issuecomment-261731734

5
Lukáš Gibo Vaic

私はこの作業を次の方法で行うことができました。

Sudo npm start
2
the_dangoria

node_modulesフォルダーを削除して、cmd npm installを使用して再インストールしてください

私のために働いた（ubuntu 18.04.3 LTS）

0
yasir jafar

明らかに、ホットモジュールのリロードは、アプリをイジェクトする場合にすぐに使用できるようになります。

ただし、アプリをイジェクトしていない場合、アプリを機能させるために これらの手順 に従うことができます。

アプリの上部でReactDOM.render(...)を見つけ、その下に次の行を追加します。

ReactDOM.render(...);

if (module.hot) {
  module.hot.accept('./App', () => {
    // --- Copy-paste your usual ReactDOM.render(...) call here: --- //
    ReactDOM.render(...);
  });
}

上記のリンクの手順は、reduxレデューサーなど、コンポーネントツリーの外部にあるものをホットリロードする方法も示しています。

0
joeytwiddle

nbuntでは、基本的にポートで実行されているすべてのプロセスを強制終了します（reactアプリのデフォルトは：3000）。

ポート3000で実行されているすべてのプロセスをリストします。

lsof -i :3000

このコマンドは、このようなものを表示します。

COMMAND   PID USER   FD   TYPE  DEVICE SIZE/OFF NODE NAME
node     7429 yipl   19u  IPv4 1081760      0t0  TCP localhost:3000->localhost:35762 (ESTABLISHED)
chrome  26448 yipl  177u  IPv4 1080082      0t0  TCP localhost:35762->localhost:3000 (ESTABLISHED)

PIDでプロセスを強制終了します。

kill -9 7429
kill -9 26488

反応アプリをもう一度起動します。

0
Bimal Grg

このコマンドを実行する

Sudo -i
echo 1048576 > /proc/sys/fs/inotify/max_user_watches
exit
0
brian bentancourt

私が経験しているもう1つのケースは、NVMで複数のバージョンのnodejsを並行して使用する場合です。基本的に、2つのターミナルウィンドウがあり、1つはノード10.xを実行し、もう1つはノード9.xで実行され、Webpackウォッチャーは変更を認識しなくなります。

解決策は、両方を同じノードバージョンにすることです。

0
Trung Tín Trần