ReactJS.Net on MVC5 fails to resolve dependency

Question

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:

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

2. 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");
       }
   }
   

3. In my Global.asax.cs file, I explicitly call ReactConfig.Configure method to replace the WebActivatorEx.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);
       }
   }
   

4. 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()
   

5. In one of my view:

   @{
       ViewBag.Title = "Home Page";
   }
   
   <div id="content"></div>      
   
   @section scripts
   {
       @Html.React("CommentBox", new {}, containerId:"content")        
   }
   

6. And finally, my jsx file:

   var CommentBox = React.createClass({
     render: function() {
       return (
           <div class="row">
               <div class="col-md-4">
               hello
               </div>
   
           </div>
       );
     }
   });
   

Answer 1

I finally found the source of my problem.

Actually, the error message was misleading. In ReactConfig.Configure method, wildcard does not works (i.e. *.jsx does not works).

I replaced the method with this:

public static void Configure()
{
    ReactSiteConfiguration.Configuration
        .AddScript("~/content/ui/commentsbox.jsx").
        .AddScript("~/content/ui/comment.jsx");
}

and it solved the issue.