問題タブ [server-side-rendering]

Webpack を使用してクライアントコードとサーバーコードの両方のバンドルを作成するユニバーサル React プロジェクトを構成しています。

これは、Webpack によってバンドルされた出力をターゲットにしてサーバーを直接実行すると正常に機能します。

ただし、「ライブ」開発サーバーを実行しようとすると問題が発生します。この場合、バンドルされたサーバー ファイルをターゲットにするのではなく、ソース ファイルを直接ターゲットにするだけで、ライブ コード変更のために webpack ホット ミドルウェアを実行できるようになります。以下は、サーバーのメイン ファイルの簡略版です。

src/server/index.js

これの実行例は次のとおりです。

正常に起動しuniversalReactAppMiddlewareますが、リクエストを処理する瞬間に、解決されたコンポーネントのサーバー レンダリングを実行しようとします。コンポーネントの一部が画像/cssをインポートするため、これは失敗します。次に例を示します。

ソース/共有/コンポーネント/Foo

コンピューターはノーと言います！

実行時に、高速サーバーが予期しない構文を示す例外をスローします。基本的に、css とイメージのインポートを Javascript として解析しようとします。これらのタイプのインポートは、正しく動作するために webpack ローダーに依存しています。

そのため、これらのタイプのコンポーネントを実行できるように、Webpack の動作を偽装するメカニズムを探しています。Pete Hunts について調査webpack-requireしていますが、問題が発生しています。

このコンテキストで機能する他のアプローチを知っている人はいますか?

2016/06/15 更新

ブーム！サードパーティのライブラリを使用せずに、これをうまくやってのけることができました。 universal-webpackかなりクールで、以前のものよりもはるかにクリーンですwebpack-isomorphic-toolsが、ユニバーサル webpack 構成が本番コードにできるだけ少ないように最小限の構成が設定されていることが気に入っています。

私は結果にかなり興奮しています。クライアント バンドルは最新の v3 ベータ版に支えられておりreact-hot-loader、素晴らしい HMR エクスペリエンスを提供しています。サーバー バンドルはファイルの変更時に再構築されるため、サーバーを手動で再起動する必要もありません。かなり甘い開発体験を実現します。

私はこれをボイラープレートに投げ込むつもりです (はい、私は知っていますが、さらに別のものです) が、おそらく他の誰かに役立つでしょう.

「aspnet-spa」ジェネレーター ( http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/ ) を使用してプロジェクトを生成します。ローカルで実行すると成功しますが、サーバー IIS ではエラーが返されます。

アタッシュ画像を見る

私は自分のサーバーにこれを持っています

そして、これはクライアント側で

問題 (let history = browserHistory) を削除した場合にのみ機能しますが、URL に /#/ ハッシュ プレフィックスが追加されます (これは望ましくありません)。

let (history = browserHistory) をそのままにしておくと、エラーがスローされます

警告: React はコンテナーでマークアップを再利用しようとしましたが、チェックサムが無効でした。これは通常、サーバー レンダリングを使用していて、サーバー上で生成されたマークアップがクライアントが予期していたものではないことを意味します。React は新しいマークアップを挿入してどちらが機能するかを補いましたが、サーバー レンダリングの多くの利点が失われました。代わりに、生成されるマークアップがクライアントまたはサーバーで異なる理由を調べてください: (client) < ! -- 反応空: 1 - (サーバー) < セクション data-reactro

エラーメッセージは非常に明確ですが、hashHistory では機能するのに browserHistory では失敗する理由がわかりません

私はNodeschoolのreactチュートリアル、というタイトルのモジュールをやっていますlearnyoureact。

レッスン中Isomorphic(11 の 8)、次の警告が表示されます。

私の解決策はこれと同じで、この解決策からコピーして貼り付けようとしましたが、それでも同じ警告が表示されます。問題を再現するには、上記のリポジトリからコードをコピーします。

それはどういう意味ですか？thisやthisなど、これに関するいくつかの SO 投稿を見ましたが、解決策が私の問題/警告に関係しているとは思いません。React の初心者として、私は次に何をすべきか困惑しています。HTML ページは問題ないように見えますが、learnyoureactモジュールには別の HTML が生成されていると表示されており、Chrome の検査ツールでも確認できます。

問題はこの行に起因することがわかりました。

この問題/警告を修正するにはどうすればよいですか? ありがとうございました！

エラー トレースの図を次に示します。

これが私が今見ているものです。数時間後に立ち去って再実行した後、警告は不思議なことに消えましnode program.jsたが、端末ではまだ同じ誤った HTML が表示されます。何か案は？