公開後にReactJs.netサーバー側のレンダリングが失敗する

Question

開発中に正常に動作するアプリケーションを公開したばかりですが、サーバーにアップロードすると、特定のビューを事前レンダリングしようとすると失敗します。

ビューを返す単純なMVC機能：

public ActionResult StandaloneReport(ReportPageData pageData) 
{ 
    return View(pageData); 
} 

単純なサーバー側レンダリング：

@Html.React("Components.ReportDisplayContainer", new {.pageData = Model}) 
@Html.ReactInitJavaScript() 

React.netがプレパックJSバンドルを使用するように設定されている：

ReactSiteConfiguration.Configuration.SetLoadBabel(false) 
    .AddScriptWithoutTransform("~/Scripts/webpack/build/server.bundle.js"); 

ReactSiteConfiguration.Configuration.SetReuseJavaScriptEngines(false); 

これは開発上問題なく動作します。パブリッシュする前にすべてのファイルをサーバーから再パブリッシュして削除しました

エラー 「react_phCzHNkR5Uq7r5UEzzqYrQ」に「Components.ReportDisplayContainerを」レンダリング中：スクリプトが例外をスローしました：オブジェクトがサーバー上で作業していない理由を私は取得していますエラーが..です

を取得できません がライン「から」プロパティまたはメソッドをサポートしない：0カラム：私はこの線Oに関しのみ見ることができます0

Line 61: @Html.React("Components.ReportDisplayContainer", New With {.pageData = Model})

をwebpackによって生成されたfコード：

return Array.from(arr); 

なぜ反応ヘルパーはサーバーではなくローカルで行うのがうまくいきますか？

Answer 1

これがまさにあなたが経験していることなのかどうかはわかりませんが、何時間も無駄な実験を経て問題が解決したので、あなたやウェブ上の誰かを助けることができれば幸いです。

私のプロジェクトは10件のjsxファイルがあります。

bundles.Add(new System.Web.Optimization.React.BabelBundle("~/bundles/CustomJsxFiles").Include(
    "~/Content/ReactJSXFiles/ReactApp.jsx", 
    "~/Content/ReactJSXFiles/CalendarControl.jsx", 
    "~/Content/ReactJSXFiles/BootstrapNavbar.jsx", 
    "~/Content/ReactJSXFiles/SectionList.jsx", 
    "~/Content/ReactJSXFiles/FutureDPsList.jsx", 
    "~/Content/ReactJSXFiles/PastDPsList.jsx", 
    "~/Content/ReactJSXFiles/TimeRecs.jsx", 
    "~/Content/ReactJSXFiles/ClickableHeader.jsx", 
    "~/Content/ReactJSXFiles/CodeEntryModal.jsx", 
    "~/Content/ReactJSXFiles/Dp28DayRow.jsx" 
)); 

をし、ローカルでデバッグするときに、それが正常に動作しますが、私はIISに発行するとき、私は唯一の3つのファイルを参照してください。私は、FYI

ClickableHeader.jsx 
ReactApp.jsx 
TimeRecs.jsx 

をPUをデバッグするための

BundleTable.EnableOptimizations = false;

を使用してrposes。 trueに設定されている場合、ファイルは1つだけ作成されますが、その場合でも、ファイルがローカルに作成されたものよりずっと小さいことがわかります。

は、私達はちょうど私が上記の指示に従って、同じ問題を持っていた：

とにかく、 http://reactjs.net/guides/weboptimizer.html での議論の一番下に、私はこの行を気づきました。 は、JSXがプロパティ内に「コンテンツ」としてマークされていることを確認してください。

：あったものは、次のようにマークされていたのに対し

：私は、Visual Studioで見て、欠落していたjsxファイルは、このような何もマークされなかった

すべてをContentとマークした後、サーバーに正常にプッシュできました。