ReactJS.Net上MVC5未能解决的依赖

问题描述

我想建立一个ASP.Net应用MV5与工作，包括服务器端渲染和捆绑。

不幸的是，它失败与此异常：

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

解决方案

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.

这篇关于ReactJS.Net上MVC5未能解决的依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！