ReactJS.NET - Bundles - TinyIoCResolutionException

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

"Unable to resolve type: React.IReactEnvironment" with no InnerException generally means ReactJS.NET is not initialising properly for some reason. In web apps, ReactJS.NET handles initialisation through the use of WebActivator. Make sure your project is referencing React.Web, React.Web.Mvc4 and WebActivatorEx, and all the corresponding .dll files are ending up in your app's bin directory.

Also, you do not need to (and should not) include JSXTransformer in your JavaScript bundles, as ReactJS.NET does all the JSX compilation server-side.