ReactJS.NET - Bundles - TinyIoCResolutionException: Unable to resolve type: React.IReactEnvironment

Question

I'm attempting to minify my .JSX files with ASP.NET Minification and Optimization via System.Web.Optimization.React. I've installed the MVC4 React Package as well as the Optimization package, but whenever I try to include a bundle I get the following:

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

The InnerException is always null

My bundles are setup as follows:

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

And included in the view as:

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

The error is always thrown on line:

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

Anyone got any ideas on how to solve / debug this one? Let me know if more info is needed.

Answer 1

I'm not sure if this is the same issue I was facing, but I googled the exact same error, found this SO topic as the first hit, with no definitive answer, so I thought I'd offer my solution.

---

I'm using .NET 4.5 in an MVC app, and React.Web.Mvc4 v3.0.0.

I managed to work around this issue with the help of this comment on Github.

Here's my entire 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"
            );
        }
    }
}

Then, I'm callingReactConfig.Configure explicitly from Application_Start.

Answer 2

Something looks like changed from React.Web.MVc4 version 4.0.0. versions before didnt have that problem.

as stated here

Install the React.Web.Mvc4 package through NuGet. You will also need to install a JS engine to use (either V8 or ChakraCore are recommended). See the JSEngineSwitcher docs for more information.

To use V8, add the following packages:

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

ReactConfig.cs will be automatically generated for you. Update it to register a JS engine and your JSX files:

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

Answer 3

If anyone needs this, just install this nuget and it will resolve this issue.

System.Web.Optimization.React