Websocket connection to 'wss:localhost:60001/w' failed: Error in connection establishment: net::ERR_SSL_PROTOCOL_ERROR

Question

I just started learning about React.js and I have been noticing in my developer window (F12) some spamming errors.

These were all the steps I did:

1. Open Visual Studio 2019
2. Create a project ASP.NET Core with React.js
3. Choose .Net Core 5.0
4. Left the option "Configure for HTTPS"
5. I pressed Play after the project finished loading
6. Clicked the F12 key and I noticed the errors popping up in the Console

I have gone through a lot of forums where people have posted about this issue but all of them have to do with people setting up their own "WebSocket Handlers". These people are actively working with web socket code. I haven't even learned web sockets yet. I found one website that remarked that I didn't have my script debugging enabled. So I did that but I still see the same error.

I notice in the error log that it points to WebSocketClient.js, line 16. But all that is located in ClientApp->node_modules and I have nothing to do with that directory or anything to do with those files.

My question is this: is the error happening because my visual studio project is not configured properly? If so, how do I fix my project in order to correct this issue? Many thanks in advance.

Answer 1

It's an issue with cra5 aka react-scripts v5:

1. To solve you need to add a .env file in the same folder where package.json is present.

2. In .env file put WDS_SOCKET_PORT=0, '0' means that it will dynamically pick whatever port on which local server is running.

3. Also need to add/uncomment the middleware UseReactDevelopmentServer in Startup.cs file. So it can be used as proxy to node dev server as v5 not using react-web-utils directly.

       app.UseSpa(spa =>
       {
           spa.Options.SourcePath = "ClientApp";
   
           if (env.IsDevelopment())
           {
               spa.UseReactDevelopmentServer(npmScript: "start");
           }
       });