ReactJS.NET - Bundles - TinyIoCResolutionException:无法解析类型:React.IReactEnvironment

时间:2015-03-02 21:08:52

标签: asp.net asp.net-mvc-4 reactjs reactjs.net

我正在尝试通过System.Web.Optimization.React使用ASP.NET Minification和Optimization来缩小我的.JSX文件。我已经安装了MVC4 React Package以及Optimization包,但每当我尝试包含一个包时,我都会得到以下结果:

React.TinyIoC.TinyIoCResolutionException: Unable to resolve type: React.IReactEnvironment

InnerException总是null

我的捆绑包的设置如下:

bundles.Add(new ScriptBundle("~/Bundle/Scripts/ReactJS").Include(
                "~/Scripts/React/react-0.12.2.js",
                "~/Scripts/React/react-with-addons-0.12.2.js",
                "~/Scripts/React/JSXTransformer-0.12.2.js"
            ));

        bundles.Add(new JsxBundle("~/Bundle/Scripts/ReactCalendar").Include(
                "~/Scripts/React/Calendar/Main.react.jsx",
                "~/Scripts/React/Calendar/Components/Calendar.react.jsx",
                "~/Scripts/React/Calendar/Components/CalendarEvent.react.jsx",
                "~/Scripts/React/Calendar/Components/CalendarControls.react.jsx",
                "~/Scripts/React/Calendar/Components/CalendarTimeSlots.react.jsx"
            ));

并包含在视图中:

@section scripts{
    @Scripts.Render("~/Bundle/Scripts/ReactJS");
    @Scripts.Render("~/Bundle/Scripts/ReactCalendar");
}

错误始终在线:

@Scripts.Render("~/Bundle/Scripts/ReactCalendar");

任何人对如何解决/调试这个有任何想法?如果需要更多信息,请告诉我。

3 个答案:

答案 0 :(得分:4)

" 无法解析类型:React.IReactEnvironment "没有InnerException通常意味着ReactJS.NET由于某种原因没有正确初始化。在Web应用程序中,ReactJS.NET通过使用WebActivator来处理初始化。确保您的项目引用React.WebReact.Web.Mvc4WebActivatorEx,并且所有相应的.dll文件最终都会显示在您应用的bin目录中。

此外,您不需要(也不应该)在JavaScript包中包含JSXTransformer,因为ReactJS.NET在所有JSX编译服务器端执行。

答案 1 :(得分:3)

我不确定这是否与我面临的问题相同,但我搜索完全相同的错误,发现这个SO主题是第一个命中,没有明确的答案,所以我想我会提供我的解决方案。

我在MVC应用程序中使用.NET 4.5,以及React.Web.Mvc4 v3.0.0。

我设法在this comment on Github的帮助下解决了这个问题。

这是我的整个ReactConfig.cs

using React;
using React.TinyIoC;
using React.Web.TinyIoC;

namespace NS.Project
{
    public static class ReactConfig
    {
        public static void Configure()
        {
            Initializer.Initialize(AsPerRequestSingleton);

            ReactSiteConfiguration.Configuration
                .SetLoadBabel(false)
                .AddScriptWithoutTransform("~/React/dist/server.bundle.js");
        }

        private static TinyIoCContainer.RegisterOptions AsPerRequestSingleton(
            TinyIoCContainer.RegisterOptions registerOptions)
        {
            return TinyIoCContainer.RegisterOptions.ToCustomLifetimeManager(
                registerOptions,
                new HttpContextLifetimeProvider(),
                "per request singleton"
            );
        }
    }
}

然后,我从ReactConfig.Configure明确地呼叫Application_Start

答案 2 :(得分:1)

从React.Web.MVc4版本4.0.0看起来有些变化。以前的版本没有这个问题。

here

所示

通过NuGet安装React.Web.Mvc4软件包。您还需要安装JS引擎才能使用(建议使用V8或ChakraCore)。有关更多信息,请参见JSEngineSwitcher文档。

要使用V8,请添加以下软件包:

JavaScriptEngineSwitcher.V8
JavaScriptEngineSwitcher.V8.Native.win-x64

ReactConfig.cs将自动为您生成。更新它以注册JS引擎和您的JSX文件:

using JavaScriptEngineSwitcher.Core;
using JavaScriptEngineSwitcher.V8;

[assembly: WebActivatorEx.PreApplicationStartMethod(typeof(React.Sample.Mvc4.ReactConfig), "Configure")]

namespace React.Sample.Mvc4
{
    public static class ReactConfig
    {
        public static void Configure()
        {
            ReactSiteConfiguration.Configuration
                .AddScript("~/Content/Sample.jsx");

            JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
            JsEngineSwitcher.Current.EngineFactories.AddV8();
        }
    }
}