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

Posted 2023-02-22

【中文标题】发布后 ReactJs.net 服务器端渲染失败

【英文标题】：ReactJs.net server side render failing after publish

【发布时间】：2016-08-20 23:53:04

【问题描述】：

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

返回视图的简单 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 文件被标记为 none，如下所示：

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

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

【讨论】：

这解决了我的问题。感谢您的提示！