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);

这一切在开发中都很好用，我在发布之前已经重新发布并删除了服务器上的所有文件，所以我不知道它为什么不在服务器上运行..

我得到的错误是：

渲染时出错＆＃34; Components.ReportDisplayContainer＆＃34;至   ＆＃34; react_phCzHNkR5Uq7r5UEzzqYrQ＆＃34;：脚本抛出异常：对象   不支持来自＆＃39;的财产或方法。行：0列：0

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

我只能看到与webpack生成的这行代码有关：

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个文件：

ClickableHeader.jsx
ReactApp.jsx
TimeRecs.jsx

仅供参考，我正在使用

BundleTable.EnableOptimizations = false;

用于调试目的。当它设置为true时，它只创建一个文件，但即使在这种情况下，您仍然可以看到该文件比本地创建的文件小得多。

无论如何，在讨论的最底层 http://reactjs.net/guides/weboptimizer.html 我注意到这一行：

我们遇到了同样的问题，我按照上面的说明操作。使确保JSX在属性中标记为“内容”。

我查看Visual Studio，并且缺少的jsx文件被标记为无：

而那些那里的标记是这样的：

将所有标记为Content后，我可以成功推送到服务器。

ReactJs.net服务器端在发布后呈现失败

1 个答案: