3

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

4

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.

Sign up to request clarification or add additional context in comments.

1 Comment

Good point, the error message could probably be more descriptive. I think a better message is hiding in an InnerException somewhere. There's a Github issue for allowing wildcards: github.com/reactjs/React.NET/issues/60

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.