asp.net-mvc-5 - MVC5 上の ReactJS.Net が依存関係の解決に失敗する

Question

サーバー側のレンダリングとバンドルを含む、 ReactJS.Netで動作するように ASP.Net MV5 アプリケーションをセットアップしようとしています。

残念ながら、次の例外で失敗します。

タイプ '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"));
   

   すべてのjsxファイルを含む「Content/ui/components」フォルダーを作成しました（実際には、チュートリアルから取得した「commentsbox.jsx」ファイルは1つだけです。

2. ReactConfig.cs では、WebActivatorEx.PreApplicationStartMethod属性を削除しました。これは、Owin コンポーネントの利益のために、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. 私の見解の1つでは：

   @{
       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");
}

そしてそれは問題を解決しました。