How to solve Unable to resolve type: React.ReactEnvironment Exception

Question

I am getting the following error:

 Unable to resolve type: React.ReactEnvironment

InnerException:

Unable to resolve type: React.JavaScriptEngineFactory

InnerException:

Object doesn't support this property or method

this is Application_Start

   AreaRegistration.RegisterAllAreas();
   RouteConfig.RegisterRoutes(RouteTable.Routes);
   BundleConfig.RegisterBundles(BundleTable.Bundles);

this is BundleConfig.RegisterBundles

   bundles.Add(new BabelBundle("~/bundles").Include("~/Scripts/HelloWorld.jsx"));

And this is Home/Index View

@{
    ViewBag.Title = "Index";
}

    <script src="~/Scripts/react/react.min.js"></script>
    <script src="~/Scripts/react/react-dom.min.js"></script>

@Scripts.Render("~/bundles")
<div id="content"></div>

the error occurs at this line

 @Scripts.Render("~/bundles")

Update1 When I tried to access /Scripts/HelloWorld.jsx directly in the browser I got this server error message:

MsieJavaScriptEngine.JsRuntimeException: Object doesn't support this property or method

Answer 1

We shoul create a static ReactConfig class and configure ReactSiteConfiguration with all the .jsx file present.

We should add our .jsx files to the scripts as follows

    public static class ReactConfig
    {
       public static void Configure()
       {
          ReactSiteConfiguration.Configuration
            .AddScript("~/Scripts/HelloWorld.jsx");
       }
    }

In Application_start call

RouteConfig.Configure();