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

Я пытаюсь настроить приложение 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 в пользу компонента Owin. Он по-прежнему содержит:

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

person Steve B    schedule 26.01.2015    source источник


Ответы (1)


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

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

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

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

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

person Steve B    schedule 27.01.2015
comment
Хороший вопрос, сообщение об ошибке, вероятно, могло бы быть более описательным. Я думаю, что лучшее сообщение скрывается где-то в InnerException. Существует проблема с Github для разрешения подстановочных знаков: github.com/reactjs/React.NET/issues/ 60 - person Daniel Lo Nigro; 22.02.2015