The development server has disconnected error in webpackHotDevClient.js

[arunkumar413]

I'm getting this error message in my app created using CRA.

The development server has disconnected.
Refresh the page if necessary. webpackHotDevClient.js:76
[HMR] Waiting for update signal from WDS..

here are the dependencies in my project

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },

[haneenmahd]

maybe the terminal you started the server might have terminated or exited the process.

[arunkumar413]

@haneenmahd No it's not. The error points to the file /static/js/vendors~main.chunk.js

var connection = new WebSocket(url.format({
  protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
  hostname: undefined || window.location.hostname,
  port: undefined || window.location.port,
  // Hardcoded in WebpackDevServer
  pathname: undefined || '/sockjs-node',
  slashes: true
})); // Unlike WebpackDevServer client, we won't try to reconnect
// to avoid spamming the console. Disconnect usually happens
// when developer stops the server.

connection.onclose = function () {
  if (typeof console !== 'undefined' && typeof console.info === 'function') {
    console.info('The development server has disconnected.\nRefresh the page if necessary.');
  }
}; // Remember some state related to hot module replacement.

[dever23b]

I'm having this issue too, and I've been searching for a few hours trying to figure it out. This is my first CRA project, and I'm trying to learn, so it's entirely possible that I've messed something up. But I'd sure like to fix it. I'm still unclear of the role of the dev server; however, I notice that the changes I make (to code) in the ~60 seconds before the connection times out automatically update in the browser until the timeout; afterwards, I have to refresh the browser. I'd like to figure out how to keep this connection alive, so I don't have to keep refreshing while I develop.

My project resides behind an Nginx reverse proxy. Accordingly, I tried the solution in 8203 regarding proxy_send_timeout and proxy_read_timeout, but I have noticed no effect. For behavior comparison, I compared my app to the Unifi controller (it was just the first web app I could think of that I knew used WS), and I notice that the working app seems to trigger a connection refresh prior to the timeout whereas my app just times out and the connection dies.

[haneenmahd]

@dever23b There is no real option for that. See #3210. This issue explains most of your questions.