ReactJs.net server side render failing after publish

Question

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.

Simple mvc function returning a view:

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

Simple server side render:

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

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..

The error I am getting is:

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

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?

Answer 1

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.

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

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

ClickableHeader.jsx
ReactApp.jsx
TimeRecs.jsx

FYI, I am using

BundleTable.EnableOptimizations = false;

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.

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

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

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

Whereas the ones that were there were marked like this:

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