Aspnetcore: create-react-app 3.3 breaks HMR and linting

[JoshClose]

Describe the bug

create-react-app 3.3 was released today with support for typescript 3.7.0 features. After updating react-scripts to 3.3.0 and typescript to 3.7.3, HMR and linting stopped working. If I run npm run start from the command line, everything works as normal. This functionality stopped working when running through visual studio launching the web page via spa.UseReactDevelopmentServer(npmScript: "start").

To Reproduce

1. Create a new ASP.NET Core Web Application project and use the React.js and Redux template. Use .NET Core and ASP.NET Core 3.0 settings also.
2. Open ClientApp/package.json and change typescript to 3.7.3, react-scripts to 3.3.0, and eslint to 6.7.2.
3. Run the project and open up the developer tools in chrome. You can see in the console output that it never connects. If you have any linting errors, they don't show up. If you make change to the source files, the page doesn't reload.
4. Go to the command line and into the ClientApp directory. Run npm run start and this will launch a window on port 3000 instead of the random port generated by Visual Studio. Open up chrome developer tools and look at the console. You can see that when running on the command line, that the functionality still works.

Further technical details

.NET Core SDK (reflecting any global.json):
 Version:   3.1.100
 Commit:    cd82f021f4

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.18362
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\3.1.100\

Host (useful for support):
  Version: 3.1.0
  Commit:  65f04fb6db

Visual Studio 16.4.0

[mkArtakMSFT]

Thanks for contacting us, @JoshClose.
We do not support all the combinations of npm dependencies for SPA templates. We support the state we release. Do you know exactly what is causing the issue? If you do, feel free to send us a PR and we'd happily consider it.

[JoshClose]

This is a default create-react-app setup with typescript though, and is fundamental to using react with the SPA templates.

I think I found the culprit.

https://github.com/facebook/create-react-app/commit/9f4cb4f0c0ed280fcd6c9faf13ebe2619a398942

If I run my site in http instead of https, everything works as normal.

[JoshClose]

Is there a way to have UseReactDevelopmentServer use WSS for it's web socket connection through configuration, or will source code changes need to happen?

[ManfredLange]

This issue is potentially related: https://github.com/facebook/create-react-app/issues/8094

[ManfredLange]

I may misread the code but it appears as if the Middleware for React development server makes an assumption that requests will never use HTTPs, see https://github.com/aspnet/AspNetCore/blob/c7937640a4079465d36441724933eae5a9ca0085/src/Middleware/SpaServices.Extensions/src/ReactDevelopmentServer/ReactDevelopmentServerMiddleware.cs#L45-L51

If I read the code correctly - and that may be a stretch - then this would also explain why switching the project to using HTTP instead of HTTPs when running from within VS works.

Update 05 Jan 2020: Workaround for users of Visual Studio 2019 (we're on 16.4.2) is to switch to HTTP for debugging locally. It'd be nicer, though, if this was fixed in the extensions package itself, i.e. in Microsoft.AspNetCore.SpaServices.Extensions.

[JoshClose]

@ManfredLange That's what I saw too. The middleware needs to be updated to work with WSS.

[ManfredLange]

@mkArtakMSFT A repo to reproduce this issue is available at https://github.com/RimuTec/react-repro

[ManfredLange]

The breakage may have been caused by this fix in create-react-app: https://github.com/facebook/create-react-app/pull/8079

[berik]

react-scripts 3.3.1 fixed this issue for me

[ffMathy]

Any updates on this? @berik even though that may be a workaround, I still think it should also be resolved in the NuGet package.

I have ejected my application with react-scripts eject, so I am unable to get the fixes in that package.

[ffMathy]

Updating react-dev-utils from 10.0.0 to 10.1.0 fixed it for me.

[JoshClose]

Updating everything to the latest version seems to fix everything.

[mkArtakMSFT]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.