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.

Rhombencephalon

Answer 1

"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.

Wristlet

Sorry for the long wait - All the references are there and everything seems to be in line - I'm currently digging thru the source to see if anything jumps out... – Rhombencephalon

Im not sure that the PreApplication init method ever gets called... is there a way to check / force this method? (and thanks for the help so far!) – Rhombencephalon

Hmm, WebActivator should be calling the ReactJS.NET init method automatically. I was going to say that you could add an explicit call to React.Web.WebInitializer.Initialize() in your Application_Start event (in Global.asax.cs) but the class is internal. You could modify it to be public or call it through reflection if you like. What web server are you running on? Are you running the project from Visual Studio? With the built-in server, IIS Express, or IIS? – Wristlet

I thought about modifying the internal call to public, will try it after lunch. Running the site as a web app thru Visual Studio and IIS – Rhombencephalon

Modified the WebInitializer class to be public, I see the Initialize method being called now, but now I get the error: Cannot register a module after the application has been initialized. - Line 31, WebInitializer.cs - DynamicModuleUtility.RegisterModule(typeof(IocPerRequestDisposal)); - For what it's worth, this is a massive project - there very well may be complications with Web Activator and other packages. The help is much appreciated, as always. – Rhombencephalon

Hmm interesting... I guess you could try registering the IocPerRequestDisposal module in the Web.config rather than dynamically like it's currently done. I can't remember the syntax for that. I've done initialisation this way since releasing ReactJS.NET around a year ago and haven't heard of anyone else having this issue, so it's really strange. I'd suggest opening an issue on the ReactJS.NET project on Github so we can try to work out what's up :) – Wristlet

Ill give that a whirl! Unfortunately this isn't my main project at the moment, only got about an hour a day to work on it. I'll get a GitHub issue created later today if this doesn't work (or even if it does) - and mark this as correct. Appreciate all the help! – Rhombencephalon

@DanielLoNigro - can you please provide for download working example with reactjs / .NET 4.7.2. Thanks in advance. – Valerlan

Answer 2

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.

Mcroberts

Answer 3

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

Dwarf

How do you show .jsx components on the web page? Do you also use BabelBundling? I am asking this because I use same principle as OP and I still have the error. I've used configuration, just as you suggested. – Valerlan

It works :) I have to install JavaScriptEngineSwitcher.V8.Native.win-x86 and after that it was all good. – Valerlan

Answer 4

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

System.Web.Optimization.React

Ocam