ReactJS.Net на MVC5 не может разрешить зависимость

Question

Я пытаюсь настроить приложение ASP.Net MV5 для работы с ReactJS.Net, включая рендеринг и связывание на стороне сервера.

К сожалению, это терпит неудачу с этим исключением:

Исключение типа 'React.TinyIoC.TinyIoCResolutionException' произошло в React.dll, но не было обработано в коде пользователя

Дополнительная информация: невозможно разрешить тип: React.ReactEnvironment

Это исключение происходит в этой строке:

 @Scripts.Render("~/bundles/ui-components")

Эта строка взята моей _layouts.cshtml файл.

Как мне решить мою проблему?

---

Чтобы дать подробности, вот что я сделал:

1. в 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"));
   

   Я создал папку "Content/ui/components" со всеми моими jsx-файлами (на самом деле только один файл "commentsbox.jsx" взят из учебника).

2. В ReactConfig.cs я удалил WebActivatorEx.PreApplicationStartMethod атрибут, потому что я это больше не поддерживается с MVC5, в прибыли компонента Оуэна. Он содержит:

   public static class ReactConfig
   {
       public static void Configure()
       {
           ReactSiteConfiguration.Configuration
               .AddScript("~/content/ui/*.jsx");
       }
   }
   

3. В моем Global.asax.cs файл, я явно называю ReactConfig.Configure способ заменить WebActivatorEx.PreApplicationStartMethod крюк:

   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. мой _layouts.cshtml Вид содержит (внизу файла):

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/bootstrap")
   @Scripts.Render("~/bundles/reactjs")
   @Scripts.Render("~/bundles/ui-components")
   @RenderSection("scripts", required: false)
   @Html.ReactInitJavaScript()
   

5. В одном из моих представлений:

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

6. И, наконец, мой файл jsx:

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

Answer 1

Я наконец нашел источник своей проблемы.

На самом деле сообщение об ошибке вводило в заблуждение. В ReactConfig.Configure метод, подстановочный знак не работает (т.е. *.jsx не работает).

Я заменил метод на это:

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

и это решило проблему.