The default ASP.NET Core + React template in Visual Studio 2019 doesn't work

Question

After creating the default project from Visual Studio 2019:

ASP.NET Core Web Application

And then using the React default template(The Weather Forecast one) to create a project, I run it immediately without modifying anything.

It builds with no errors, but upon running and opening a tab in the browser, I get an error:

compiler.hooks.done.tap('done', async stats => {
^^^^^

SyntaxError: missing ) after argument list  
at createScript (vm.js:56:10)   
at Object.runInThisContext (vm.js:97:10)   
at Module._compile (module.js:542:28)   
at Object.Module._extensions..js (module.js:579:10)   
at Module.load (module.js:487:32)  
at tryModuleLoad (module.js:446:12)   
at Function.Module._load (module.js:438:3)  
at Module.require (module.js:497:17)   
at require (internal/module.js:20:19)

I even tried installing the latest versions of npm and react.core from NuGet packages, but nothing changed. Same error every time I run it.

Answer 1

I work with the templates a lot, and including React. Here are two things you can try.

• Templates get fixed and updated all the time, especially those that depend on outside frameworks like React. For example, I remember a few months ago when the React was not working on a brand new project. I remember, even bootstrap was not working out of the box in another new template created project. Just to make sure, after seeing your question, I created a new React App in Visual Studio and it is running fine.

So, solution # 1 - Update your Visual Studio installation. I am pretty sure you are using an outdated version of template.

• Okay, now, what if you are still getting error. Or, what I did, back when the template was corrupted. Easy. Please remember, that the template is meant to help you, but it is not the way to actually use the frameworks you want. Please note that you can add any time of JS framework to your dot net core.

So, Solutions #2

In your case, react is a Single Page Application. discussion here - What is the difference between UseStaticFiles, UseSpaStaticFiles, and UseSpa in ASP.NET Core 2.1?

another place where a similar discussion is happening is here - https://www.roundthecode.com/dotnet/add-a-react-app-to-your-asp-net-core-application

Essentially, you create a folder for your React SPA and do something like this. Here 'ClientApp' is the folder where you add your react project.

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseReactDevelopmentServer(npmScript: "start");
            }
        });