Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

[mlorbetske]

From @nickdb93 on August 8, 2018 20:22

Steps to reproduce:

Run the following commands:

dotnet new react -n <SOME_NAME> cd <SOME_NAME> dotnet build dotnet run

Navigate to http://localhost:/ then click on "Fetch Data".

This results in the following error appearing tin the browser:

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0
(anonymous function)
C:/<SOME_NAME>/ClientApp/src/components/FetchData.js:11

   8 |    this.state = { forecasts: [], loading: true };
   9 | 
  10 |    fetch('api/SampleData/WeatherForecasts')
> 11 |      .then(response => response.json())
  12 |      .then(data => {
  13 |        this.setState({ forecasts: data, loading: false });
  14 |      });

I assume this is due to the client app trying to fetch the list from http://localhost:3000/api/SampleData/WeatherForecasts (NPM server) when it should be attempting to get it from http://localhost:5000/api/SampleData/WeatherForecasts (.NET Web API server).

I did not alter any code before running this.

After this, I tried using the following code in Startup.cs

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

                if (env.IsDevelopment())
                {
                    // spa.UseReactDevelopmentServer(npmScript: "start");
                    spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");

                }
            });

I then navigated to http://localhost:3000/fetchdata and saw the same error.

I know that I can solve this by enabling CORS on the API side and hard-coding FetchData.js:10 to be fetch('http://localhost:5000/api/SampleData/WeatherForecasts') , but I'm kind-of wondering how to get it working as intended.

I am running this on Windows 7 x64 in Google Chrome. The project is targeting netcoreapp2.1 and using Microsoft.AspNetCore.SpaServices.Extensions.2.1.1

EDIT I tried it on Windows 10 x64 as well, not changing and code from the template and got the same error.

Copied from original issue: dotnet/templating#1639

[mkArtakMSFT]

Thanks for contacting us, @nickdb93. @ryanbrandenburg, can you please look into this? Thanks!

[baughmann]

I mistakenly posted the below on the old issue.

I tested a (partial) solution. Adding "proxy": "https://localhost:5001/", to the package.json of the ClientApp resolved the issue when running in development. I have concerns, though, that that will make matters worse when the application is deployed to IIS since it's unlikely that the API will be served on 5001. I could hard-code it in Program.cs of the API with WebHost.CreateDefaultBuilder(args).UseUrls("https://0.0.0.0:5001") but I do not believe this is good practice.

All of this still doesn't put my mind at ease since this template failed to work out-of-the-box on both Windows 7 and Windows 10. How am I the only one experiencing this issue?

EDIT I have confirmed that this works when deployed to IIS. However, I really don't like the idea of having to hard-code the port. What would the real solution be?

[ryanbrandenburg]

I wasn't able to replicate this with the steps you've listed above. Could you create a reproduction app (preferably as a github repo) which exhibits this behavior?

[mkArtakMSFT]

@nickdb93, please provide a repro project so we can investigate.

[baughmann]

@mkArtakMSFT and @ryanbrandenburg My apologies for the late reply. I will do that now and post it here shortly.

[baughmann]

@mkArtakMSFT and @ryanbrandenburg You may find repo here: https://github.com/nickdb93/NetCoreReactTemplateWithError

[ryanbrandenburg]

Your project does not compile out of the box for me:

D:\dd\Temp\NetCoreReactTemplateWithError\test.csproj : error NU1107: Version conflict detected for Microsoft.AspNetCore.Antiforgery. Reference the package directly from the project to resolve this issue.
D:\dd\Temp\NetCoreReactTemplateWithError\test.csproj : error NU1107:  test -> Microsoft.AspNetCore.SpaServices.Extensions 2.1.1 -> Microsoft.AspNetCore.SpaServices 2.1.1 -> Microsoft.AspNetCore.Mvc.ViewFeatures 2.1.1 -> Microsoft.AspNetCore.Antiforgery (>= 2.1.1)
D:\dd\Temp\NetCoreReactTemplateWithError\test.csproj : error NU1107:  test -> Microsoft.AspNetCore.App 2.1.0 -> Microsoft.AspNetCore.Antiforgery (= 2.1.0).

This likely just means that you and I have different runtimes and what-not installed. If I add Version="2.1.1" to <PackageReference Include="Microsoft.AspNetCore.App" /> everything runs fine for me, even on the fetch data page.

I think it would be helpful to tell me the exact steps you took to set up the Win10 machine for testing this and I'll try to replicate that in a VM. Baring that, it would be helpful to see the output of dotnet --info on your Win10 machine.

[mkArtakMSFT]

Hi. We're closing this issue as there's been no response and we have been unable to reproduce it. If you have more details and are encountering this issue please add a new reply and re-open the issue.

[iandesj]

I can reproduce this.

[manifoldhiker]

I created fresh reactredux template with dotnet new and I have this issue.

dotnet --info output:

.NET Core SDK (reflecting any global.json):
 Version:   2.1.403
 Commit:    04e15494b6

Runtime Environment:
 OS Name:     ubuntu
 OS Version:  16.04
 OS Platform: Linux
 RID:         ubuntu.16.04-x64
 Base Path:   /usr/share/dotnet/sdk/2.1.403/

Host (useful for support):
  Version: 2.1.5
  Commit:  290303f510

.NET Core SDKs installed:
  2.1.403 [/usr/share/dotnet/sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.5 [/usr/share/dotnet/shared/Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.5 [/usr/share/dotnet/shared/Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.5 [/usr/share/dotnet/shared/Microsoft.NETCore.App]

[manifoldhiker]

/api/SampleData/WeatherForecasts?startDateIndex=0 returns me html that says You need to enable JavaScript to run this app.

[manifoldhiker]

Every fresh template created with dotnet new with options react and reactredux are brocken for me in this way.

[ryanbrandenburg]

For everyone still having trouble with this, your problem is likely the same as aspnet/Templating#820. That is, you need to be hitting the port of the AspNetCore server instead of the one for react or angular directly.