Server-side rendering on Azure WebSite with importing 3rd party JS files.

[alekkowalczyk]

Hi!,

I'm using ReactJS.NET 2.1 in my latest project, everything locally works great, but I have a problem after publishing to an Azure WebSite.
I have a few React components, and I'm using React-bootstrap.js, everything in ASP.NET 5. That is how my Startup.cs looks like when it comes to configuring React for server-side rendering:

// Add ReactJS.NET to the request pipeline.
            app.UseReact(config =>
            {
                config
                    .AddScriptWithoutTransform("~/js/react-bootstrap.min.js")
                    .AddScript("~/app/navigation.jsx")
                    .AddScript("~/app/home.jsx")
                    .AddScript("~/app/accounts/accountUtils.js")
                    .AddScript("~/app/accounts/myAccounts.jsx");
            });

Works great locally on IIS Express, but after publishing on Azure WebSites I'm getting following exception on application stratup:

Error while loading "~/js/react-bootstrap.min.js": Object.create: implementation only accepts one parameter.

[Daniel15]

It sounds like it's using the V8 engine locally, but the MSIE engine when uploaded to Azure. V8 supports more stuff than MSIE does, and it looks like that error is coming from an Object.create polyfill. This engine switching is a source of confusion so I'm probably just going to remove the MSIE engine in a future version of ReactJS.NET.

In the meantime, try call .SetAllowMsieEngine(false) in ReactConfig.cs and publish your site to Azure again. It should show you the error message encountered while loading V8, rather than falling back to the MSIE engine.

[alekkowalczyk]

I set `.SetAllowMsieEngine(false)' and now it doesn't work locally.

I added the JavaScriptEngineSwitcher.V8 nuget package but it didn't help.

That is the exception I get:

 An unhandled exception occurred while processing the request.

 DirectoryNotFoundException: Failed to load the ClearScriptV8 assembly, because the directory 'C:\Users\alek\.dnx\runtimes\dnx-clr-win-x86.1.0.0-beta8\ClearScript.V8' does not exist.
System.Reflection.RuntimeAssembly._nLoad(AssemblyName fileName, String codeBase, Evidence assemblySecurity, RuntimeAssembly locationHint, StackCrawlMark& stackMark, IntPtr pPrivHostBinder, Boolean throwOnFileNotFound, Boolean forIntrospection, Boolean suppressSecurityChecks)

 JsEngineLoadException: During loading of V8 JavaScript engine error has occurred.  
  See more details:

 Failed to load the ClearScriptV8 assembly, because the directory 'C:\Users\alek\.dnx\runtimes\dnx-clr-win-x86.1.0.0-beta8\ClearScript.V8' does not exist.
JavaScriptEngineSwitcher.V8.V8JsEngine..ctor(V8Configuration config)

 TargetInvocationException: Exception has been thrown by the target of an invocation.
 System.RuntimeTypeHandle.CreateInstance(RuntimeType type, Boolean publicOnly, Boolean noCheck, Boolean& canBeCached, RuntimeMethodHandleInternal& ctor, Boolean& bNeedSecurityCheck)

  ClearScriptV8InitialisationException: Failed to initialise ClearScript V8. This is most likely caused by the native libraries (ClearScriptV8-64.dll and v8-x64.dll) missing from your app's Bin directory, or the Visual C++ runtime not being installed. Please ensure your app is referencing the JavaScriptEngineSwitcher.V8 NuGet package, and refer to the ReactJS.NET site for moredebugging tips.

  More details: Exception has been thrown by the target of an invocation.
  React.JavaScriptEngineUtils.EnsureEngineFunctional[TEngine,TException](Func`2 exceptionFactory)

[samppis]

I'm also having this same problem. Trying to get react-bootstrap working on Azure but haven't found a working solution yet. I have tried to run V8 in an ASP.NET 5 Azure WebApp but it seems like the JavaScriptEngineSwitcher isn't supporting ASP.NET 5 yet.

Any help would be appreciated!

[westdavidr]

@alekkowalczyk Did you ever resolve this issue?

[alekkowalczyk]

@westdavidr unfortunatelly not, we dropped the idea of server side rendering as it seems not mature enough.

[westdavidr]

That is unfortunate. Hope this gets resolved soon.

[samppis]

I finally found a way to get it working by running V8 in Azure. Here's a blog post I wrote: http://www.samulihaverinen.com/web-development/dotnet/2016/01/19/how-to-run-clearscript-v8-javascript-engine-in-azure/

I would suggest ReactJS.NET to update the JavaScriptEngineSwitcher.V8 to the latest version as the current one doesn't work in ASP.NET 5 (it requires a configuration section in web.config or otherwise a null reference exception is thrown by the constructor).

[westdavidr]

Thanks @samppis!

@Daniel15 Can you update to the latest version of JavaScriptEngineSwitcher.V8?

[Daniel15]

Can you update to the latest version of JavaScriptEngineSwitcher.V8?

I'll do that tonight :) Created #216 to track progress. In the meantime you can just manually upgrade the package.

I would suggest ReactJS.NET to update the JavaScriptEngineSwitcher.V8 to the latest version as the current one doesn't work in ASP.NET 5

Good catch! I'm running ASP.NET 5 + ReactJS.NET in production, except I'm on Linux which uses VroomJs rather than ClearScript.

[Daniel15]

Closing this out now that ReactJS.NET 2.2 runs V8 on Azure out-of-the-box, and @samppis added this documentation page: http://reactjs.net/guides/azure.html. Thanks!