发布后 ReactJs.net 服务器端渲染失败

IT技术 c# asp.net-mvc reactjs
2021-05-24 02:19:28

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

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

这在开发中一切正常,我在发布之前重新发布并删除了服务器上的所有文件,所以我不明白为什么它不能在服务器上工作..

我得到的错误是:

将“Components.ReportDisplayContainer”渲染为“react_phCzHNkR5Uq7r5UEzzqYrQ”时出错:脚本抛出异常:对象不支持属性或方法“来自”行:0 列:0

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

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

return Array.from(arr);

那么为什么 react 助手乐于在本地而不是在服务器上执行此操作呢?

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,我可以成功推送到服务器。