发布后ReactJs.net服务器端渲染失败 [英] ReactJs.net server side render failing after publish

问题描述

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

I just published an application that is working fine in development, but when I upload it to the server it fails when I try to pre-render a specific view.

简单的mvc函数返回视图:

Simple mvc function returning a view:

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

简单的服务器端渲染:

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

React.net设置为使用预打包的js包:

React.net is set to used a pre-packed js bundle:

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

ReactSiteConfiguration.Configuration.SetReuseJavaScriptEngines(false);

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

This all works fine in development, and I have republished and deleted all files from the server before publishing so I don't get why it's not working on the server..

我得到的错误是:

将"Components.ReportDisplayContainer"呈现为错误 "react_phCzHNkR5Uq7r5UEzzqYrQ":脚本引发了异常:对象 不支持属性或方法"from"行:0列:0

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生成的这一行代码有关的信息:

Which I can only see relates to this line of code generated by webpack:

return Array.from(arr);

那么为什么反应助手很乐意在本地而不是在服务器上进行

So why is the react helper happy to do it locally but not on the server?

推荐答案

不确定这是否正是您所遇到的问题，但是经过数小时毫无结果的尝试后，我碰巧遇到了问题的解决方案，因此希望它能对您有所帮助您或网络上的某人.

Not sure if this is exactly what you're experiencing, but I happened upon the solution for my issue after many hours of fruitless experimentation, so hopefully it can help you or someone on the web.

我的项目有10个jsx文件:

My project has 10 jsx files:

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

and it works fine when debugging locally, but when I published to IIS, I only see 3 files:

ClickableHeader.jsx
ReactApp.jsx
TimeRecs.jsx

仅供参考，我正在使用

BundleTable.EnableOptimizations = false;

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

for debugging purposes. When it's set to true, it creates just one file, but even in that case you can still see that the file is much smaller than the one created locally.

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

Anyway, at the bottom of the discussion at http://reactjs.net/guides/weboptimizer.html I noticed this line:

我们只是遇到了同样的问题，我按照上述说明进行操作.制作 确保在属性中将JSX标记为内容".

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文件没有这样标记:

I look in Visual Studio and the jsx files that were missing were marked none like this:

其中存在的标记如下:

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

After marking them all as Content, I could successfully push to the server.

这篇关于发布后ReactJs.net服务器端渲染失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！