c# - ReactJs.net 服务器端渲染在发布后失败

Question

我刚刚发布了一个在开发中运行良好的应用程序，但是当我将其上传到服务器时，当我尝试预渲染特定 View 时，它会失败。

返回 View 的简单 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);

这一切在开发中都运行良好，并且在发布之前我已经重新发布并删除了服务器中的所有文件，所以我不明白为什么它不能在服务器上运行。

我收到的错误是:

Error while rendering "Components.ReportDisplayContainer" to "react_phCzHNkR5Uq7r5UEzzqYrQ": Script threw an exception: Object doesn't support property or method 'from' Line: 0 Column:0

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

我只能看到与 webpack 生成的这行代码相关:

return Array.from(arr);

那么为什么 React Helper 乐意在本地执行而不是在服务器上执行呢？

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 我注意到这一行:

We just had the same issue, I followed the above instructions. Make sure the JSX is marked as "content" in the properties.

我在 Visual Studio 中查看，缺少的 jsx 文件被标记为“无”，如下所示:

而那里的标记是这样的:

将它们全部标记为Content后，我可以成功推送到服务器。