I'm trying to set up an ASP.Net MV5 application to work with ReactJS.Net, including server side rendering and bundling.
Unfortunately, it fails with this exception:
An exception of type 'React.TinyIoC.TinyIoCResolutionException' occurred in React.dll but was not handled in user code
Additional information: Unable to resolve type: React.ReactEnvironment
This exception occurs on this line:
@Scripts.Render("~/bundles/ui-components")
This line is taken my _layouts.cshtml
file.
How should I solve my issue?
To give of details, here what I've done:
in BundleConfig.cs:
bundles.Add(new ScriptBundle("~/bundles/reactjs").Include( "~/Scripts/react/react-{version}.js")); bundles.Add(new JsxBundle("~/bundles/ui-components") .Include("~/content/ui/components/*.jsx"));
I created a folder "Content/ui/components" with all my jsx files (actually only one "commentsbox.jsx" file taken from the tutorial.
In ReactConfig.cs, I removed the
WebActivatorEx.PreApplicationStartMethod
attribute, because I've this is no more supported with MVC5, in profit of Owin component. It stills contains :public static class ReactConfig { public static void Configure() { ReactSiteConfiguration.Configuration .AddScript("~/content/ui/*.jsx"); } }
In my
Global.asax.cs
file, I explicitly callReactConfig.Configure
method to replace theWebActivatorEx.PreApplicationStartMethod
hook:public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { ReactConfig.Configure(); AreaRegistration.RegisterAllAreas(); FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles(BundleTable.Bundles); } }
My
_layouts.cshtml
view contains (at the bottom of the file):@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/reactjs") @Scripts.Render("~/bundles/ui-components") @RenderSection("scripts", required: false) @Html.ReactInitJavaScript()
In one of my view:
@{ ViewBag.Title = "Home Page"; } <div id="content"></div> @section scripts { @Html.React("CommentBox", new {}, containerId:"content") }
And finally, my jsx file:
var CommentBox = React.createClass({ render: function() { return ( <div class="row"> <div class="col-md-4"> hello </div> </div> ); } });