ReactJS.Net on MVC5 fails to resolve dependency

2019-07-20 07:19发布

问题:

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

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