[SOLVED] ReactJS.NET – Bundles – TinyIoCResolutionException: Unable to resolve type: React.IReactEnvironment

Issue

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.

Solution

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.

Answered By – Daniel Lo Nigro

Answer Checked By – Timothy Miller (BugsFixing Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *