React.AspNet(3.0.0) + React.Core(3.0.0) JSX build fail.

[sevovich]

With React.AspNet 3.0.0, React.Core 3.0.0 running .NET Core, fetching JSX-files results in server error.

Startup.cs:
`
using Microsoft.AspNetCore.Http;
using React.AspNet;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;

namespace DQSpider
{
public class Startup
{
public Startup(IHostingEnvironment env)
{
var builder = new ConfigurationBuilder()
.SetBasePath(env.ContentRootPath)
.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
.AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
.AddEnvironmentVariables();
Configuration = builder.Build();
}

    public IConfigurationRoot Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        // Add framework services.
        services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>();
        services.AddReact();
        services.AddMvc();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
            app.UseBrowserLink();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");
        }




        app.UseReact(config =>
        {

            config.AddScript("~/js/tutorial.jsx");


        });
        app.UseStaticFiles();

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

}
`
Navigating to the tutorial.jsx file in browser shows:

React.TinyIoC.TinyIoCResolutionException: Unable to resolve type: React.IReactEnvironment
at React.TinyIoC.TinyIoCContainer.ResolveInternal(TypeRegistration registration, NamedParameterOverloads parameters, ResolveOptions options)
at React.TinyIoC.TinyIoCContainer.ResolveResolveType
at React.AspNet.BabelFileMiddleware.d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.GetResult()
at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.d__7.MoveNext()

[ghost]

I was able to replicate the issue as well. On-the-fly JSX conversion may be having issues while using react.aspnet on the latest .net core release.

[sevovich]

It may not be fully related too only JSX Conversion.
Running @Html.ReactInitJavaScript() after I included the JSX-files says React.NET is not even initialized. Can give stacktrace later.

[edikep2000]

It seems this library is not ready for production and I have been stupid enough to start using it without investigating Issues

[sevovich]

Agreed. Though I got this perticular issue "solved"(created a project in VS for Mac) instead. Either the library is not ready, or the documentation might need more specific instruktions for initializing a projekt with ReactJS.NET

[UmarFKhawaja]

Is there a fix for this issue yet? I am trying to use this library with .NET Standard 1.6 and it's not working due to this issue.

Is there a workaround available?

[chanan]

@khawajaumarfarooq I am working with Core 1.1 - It works for me in VS2015 but not VS2017, can you confirm that you have the same issue and workaround?

[Merott]

I'm using VS2015, facing the same issue with .NET 4.5. Still looking for a solution.

[UmarFKhawaja]

@chanan I followed the following tutorials available on the website:

1. https://reactjs.net/getting-started/tutorial_aspnet4.html
2. https://reactjs.net/getting-started/tutorial.html

I used Visual Studio 2015 for the first one, and Visual Studio Code for the second one, using the latest dotnet CLI tool. This version of the CLI tool does not generate a project.json, but instead generates the new MSBuild format for the project.

If you like, I can provide both solutions for investigation of this issue. I am very keen for this issue to be resolved, or indeed, if the issue is at my end, then to understand how to fix it.

As far as I can tell, the issue that's causing the error has already been fixed, but for some reason, the fix doesn't seem to be working. I believe it was fixed under #359, and that issue is part of release 3.0.0, but it's still broken on ASP.NET Core.

Do you think you an prepare a sample with Core 1.1 in VS2015 amd upload it somewhere for comparison?

[Merott]

I'm using .NET 4.5.

I managed to work around this issue with the help of this comment in #240.

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.

[UmarFKhawaja]

@chanan Any ideas?

bump

[chanan]

Here is an ASP.Net Core React sample working in VS2015

https://github.com/chanan/ReactCore

[chanan]

Upgraded the same project to VS2017 RC and I get the following again:

React.TinyIoC.TinyIoCResolutionException: Unable to resolve type: React.IReactEnvironment
   at React.TinyIoC.TinyIoCContainer.ResolveInternal(TypeRegistration registration, NamedParameterOverloads parameters, ResolveOptions options)
   at React.TinyIoC.TinyIoCContainer.Resolve[ResolveType]()
   at React.AspNet.BabelFileMiddleware.<Invoke>d__5.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.VisualStudio.Web.BrowserLink.Runtime.BrowserLinkMiddleware.<ExecuteWithFilter>d__7.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
   at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.<Invoke>d__7.MoveNext()
Microsoft.AspNetCore.Hosting.Internal.WebHost:Information: Request finished in 171.1422ms 500 text/html; charset=utf-8

[erik-nguyen]

I have the same issue with VS 2017 RC.
Any ideas?
Thanks.

[UmarFKhawaja]

So I have worked out a workaround for .NET Core using VS 2017 RC.

I am using Gulp and gulp-babel to transpile the JSX files for each component to JS, and then I am using pre-transpiled JS within the Razor view to issue the call to ReactDOM.render.

I am using Task Runner Explorer to hook up the various Gulp tasks (I have 2 main ones, minify, and clean) to the corresponding MSBuild events (minify before project build, and clean on clean). Hitting F5 in VS then ensures that JSX files are refreshed before build.

When using the command line, I issue a command like gulp minify && dotnet run to start the web server.

The downsides of my approach are that:

1. I can't use @Html.React(...) statements, therefore a model object in C# being passed to JavaScript needs to use something like:

ReactDOM.render(React.createElement(MyFancyComponent, { foo: @(Foo) }), document.getElementById('main'));

And that breaks JavaScript syntax, though still works because it is valid Razor syntax.

2. Having to refresh JS file resulting from JSX files is less than ideal.

I hope that helps. I can share further details if needed.

Really hoping someone fixes this for .NET Core.

[erik-nguyen]

@khawajaumarfarooq
Thanks for sharing your ideas.

[olivierr91]

I am having exactly the same issue with .NET Core 1.1 on VS 2017 RC.

[dustinsoftware]

Closing issues older than a year, please re-open if you think this is still relevant.