問題タブ [react-hot-loader]

react-hot-loader を使用して webpack のホット リロードを設定しようとしています。ほとんどの場合、機能しているようです。既存の Rails アプリで webpack を使用しています。

ただし、ホットリロードではありません。反応コードが変更されるたびにリロードをトリガーするだけです。私が得るエラーメッセージは次のとおりです。

ここに私の webpack.hot.config.js 設定があります:

そして、私はコードを実行します

Rails 開発環境は、私の development.rb ファイルの次の設定により、webpack-dev-server を介してアプリケーション アセット パイプラインの外部で webpack ファイルを提供します。

私はこれを何時間も機能させようとしています。どんな助けでも大歓迎です。

みんなありがとう！

モジュールを追加して CSS を別のファイルにエクスポートするように、 React Hot Loader ボイラープレート を変更しました。webpack.config.js

プラグインと同様に：

参照用の完全なwebpack.config ファイルを次に示します。app.cssを実行すると正しくエクスポートされwebpackますが、開発用のホット リロード機能が無効になります。モジュールを次のように戻すと:

ホットリロードは正常に機能します (調整された webpack.config )。

開発中と運用準備完了コードのエクスポート中に、これら 2 つを簡単に切り替えるための最適なセットアップは何ですか? 私の考えでは、npm start( を呼び出すだけでnode server.js) を使用して自動的に開発モードを使用し、次に実行するwebpackかwebpack -p、自動的に本番環境を使用できれば、それが理想的です。

反応ステートレス関数を使用したホットリロードではなく、クラス拡張コンポーネントを作成すると正常に動作する webpack-dev-middleware に少し問題があります。

たとえば、これは完全に機能します。

しかし、これは惨めに失敗します。

エラー：

StackOverflow と GitHub の問題についても多くの回答を確認しましたが、Webpack のホット モジュール交換にまだ行き詰まっています。npm startでサーバーを実行するために使用していますwebpack-dev-server --hot --inline。React コンポーネントのコードを変更しようとしていますが、ブラウザで何も起こりません。

Ubuntu 14.04LTS で Google Chrome バージョン 49.0.2623.87 (64 ビット) を使用しています。

私のブラウザconsoleでは、ログメッセージを次のように取得しています

[HMR] WDS からの更新信号を待っています...

[WDS] ホットモジュール交換が有効になりました。

ただし、ホット/ライブ リロードは発生していません。React コンポーネント ファイルのコードを変更しても、何も表示されません。このチュートリアルの最初のビデオ、Egghead.io/ReactFundamentalsに従っていましたが、すべてが正常に機能していました。

以下は私のpackage.jsonとwebpack.config.jsファイルです。

パッケージ.json

webpack.config.js

チュートリアルをこれ以上効率的に進められないので、誰かがこの問題を解決してくれると助かります。

更新私は以下の答えを投稿しました。

ここ数日間、「react-redux-webpack」の世界に飛び込んでいます。試して、ログイン用のテンプレートを作成したいと思っています。

ビューの高速更新が機能するようにReact Hot Loaderを注入しましたが、「requireAuth」部分でラップされていないビューのみを更新します。

ログインの変更を検出するためにcomponentWillUpdateandを使用しています。componentWillMountでは、React Hot Loader が変更をビューにプッシュできない理由は何でしょうか? 新しいデータ（IDEで変更/保存された後）がブラウザ（chromeネットワークインスペクタ内）にプルされることがわかったので。

私はすでに自分の考えを試していたので、ご意見をいただければ幸いです。

これは、その目的のために機能するチュートリアルの助けを借りて構築した「認証を必要とする」コンポーネントです。

また、サインイン後にのみ使用できるラップされた「リソース」コンポーネントで表示します。

transform-class-properties を使用しています。ボタンのテキストなどを変更すると、すべて正常に機能しますが、関数を次のように変更すると、次のようになります。

ページを手動で更新するまで効果はありません。コンソールに出力が表示されます。

しかし、更新を行うまで変更は反映されません。この機能(transform-class-properties) は機能していますが、変更に対して脆弱です。のようなものを追加console.log('foobar');してボタンを押しても何も起こりません。つまり、新しいことは何も起こりません。ES6 が意図したとおりに動作することを理解する通常のクラス メソッド構文の構文を変更すると、 console.log が更新されずに「ライブ」と表示されるので、トランスパイル プロセス中に何か問題があると思います。

これは私の webpack.development.config.js ファイルです:

新しいReact Hot Loader 3を試していますが、次の警告メッセージが表示されます。

warning.js:44 警告: React.createElement: タイプは null、未定義、ブール値、または数値であってはなりません。文字列 (DOM 要素の場合) または ReactClass (複合コンポーネントの場合) である必要があります。のレンダリング方法を確認してくださいAppContainer。

これがアプリファイルです。なにが問題ですか？
Ps: 例と同じように書かれています。
Ps2: if ステートメントの外側の render() でレンダリングされるため、問題はアプリにはありません
Ps3: ブラウザが「ホットリロード」を試みた場合にのみ警告が表示されます (任意のファイルに変更を加えた場合)

webpack を実行してサーバーに接続することはできますが、ブラウザーに表示されるのは GET できないというメッセージだけです。私が設定を台無しにしている場所を誰かが見つけられるかどうかを確認できますか。私のすべてのコンポーネントはpublicというファイルにあるので、webpack.config.jsファイルに関連して「./public」になります

webpack.config.js

サーバー.js