react-scripts 3.3.0 - "The development server has disconnected. Refresh the page if necessary"

[elisciandrello]

So in development, just a standard create-react-app template, and I start receiving this console error right away.

I went through previous issues of this sort, followed all instructions but no matter what still ran into this error.

The only way I was able to prevent it from happening was downgrading to react-scripts-3.2.0

[noelstieglitz]

Did you also see an error related to websockets in the console? This could be related to #8075 . The fix is merged (#8079) and will be released with 3.3.1. If you don't want to downgrade to 3.2.0, you can hack up line 62 from:

protocol: 'ws',
to
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

in the following file:
node_modules/react-dev-utils/webpackHotDevClient.js

[websash]

Unfortunately window.location.protocol === 'https:' ? 'wss' : 'ws' doesn't help. I'm running it on http://localhost anyway in docker with node_modules mounted as named volume with nginx as reversed proxy. It disconnects after about 1 min. react-scripts-3.2.0 works properly with my setup though

[uncaught]

Same for me, nginx reverse proxy for ssl, I have the window.location.protocol === 'https:' ? 'wss' : 'ws' line hacked in because I need https for development.
But after about a minute idle, it disconnects. with this The development server has disconnected. Refresh the page if necessary. message.

My nginx config:

server {
  listen        80;
  server_name   xxx;
  return 301 https://$host$request_uri;
}

server {
  listen        443;
  server_name   xxx;

  location / {
    proxy_pass  http://192.168.42.211:3333;
  }

  location /api {
    proxy_pass  http://192.168.42.211:3030;
  }

  add_header Strict-Transport-Security    "max-age=31536000; includeSubDomains" always;
  add_header X-Frame-Options              SAMEORIGIN;
  add_header X-Content-Type-Options       nosniff;
  add_header X-XSS-Protection             "1; mode=block";

  proxy_set_header X-Real-IP           $remote_addr;
  proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto   $scheme;
  proxy_set_header Host                $host;
  proxy_set_header X-Forwarded-Host    $host;
  proxy_set_header X-Forwarded-Port    $server_port;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";

  ssl on;
  ssl_certificate             /etc/ssl/private/fullchain1.pem;
  ssl_certificate_key         /etc/ssl/private/privkey1.pem;
}

[nazar]

After some digging I found that this is related to nginx's default proxy_read_timeout 60s rule. It seems that prior react-scripts versions would reload the websocket connection when it timed out after 60s.

Adding the following two rules to my location /sockjs-node fixed the disconnects for me when using an nginx reverse proxy - incidentally, CRA's built-in proxy does not have this disconnect issue.

    location /sockjs-node {
      proxy_pass http://client-web:3000;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $connection_upgrade;

      # the following two timeout rules fix CRA WDS disconnects after 60s
      proxy_read_timeout 86400s;
      proxy_send_timeout 86400s;
    }

HTH

[elisciandrello]

Did you also see an error related to websockets in the console? This could be related to #8075 . The fix is merged (#8079) and will be released with 3.3.1. If you don't want to downgrade to 3.2.0, you can hack up line 62 from:

protocol: 'ws',
to
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

in the following file:
node_modules/react-dev-utils/webpackHotDevClient.js

I did attempt this and it actually still didn't work. The only way was downgrading my react-scripts still.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[bklynate]

I am still experiencing this issue, I've also ejected... not sure if anyone else is experiencing post eject..

[michaeljota]

I can confirm this is still happening even in 3.3.1. Same as the comments above, I'm using a docker image to run the app in a reverse proxy with https enabled.

[omerfaran]

Hello
It's happening for me as well

[omerfaran]

I looked at my package.json and it seems like my react-scripts version is 1.1.15, does it make sense? It's very old:

{
  "name": "ecommerce-react-graphql-stripe",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "gestalt": "^0.79.1",
    "react": "^16.4.2",
    "react-bootstrap": "^0.32.4",
    "react-datepicker": "^2.7.0",
    "react-dom": "^16.4.2",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "react-spinners": "^0.4.5",
    "react-stripe-elements": "^2.0.1",
    "redux": "^4.0.1",
    "resize-base64": "^1.0.12",
    "strapi-email-sendgrid": "^3.0.0-alpha.14.5",
    "strapi-sdk-javascript": "^0.2.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Should I upgrade to 3.2.0 then?
Thanks in advance