react-refresh-webpack-plugin icon indicating copy to clipboard operation
react-refresh-webpack-plugin copied to clipboard

Does not use `webSocketURL`

Open ChocolateLoverRaj opened this issue 2 years ago • 6 comments

Here is the docs for the option: https://webpack.js.org/configuration/dev-server/#websocketurl This plugin just sends a request to /ws, even if a different path, hostname, or port is specified. Link to reproduce: https://github.com/ChocolateLoverRaj/webpack-dev-server-bug/tree/react-refresh#readme

ChocolateLoverRaj avatar Mar 28 '23 04:03 ChocolateLoverRaj

Support for this option have not been added, but should be. I'll try to find time to work on this.

pmmmwh avatar Apr 12 '23 11:04 pmmmwh

I'm pretty sure this is why I keep getting an error with websocket connection failure. Despite setting the react refresh overlay websockets. setting the dev-server host and the client websocket url details.

websocket connection to 'ws://localhost/ws' failed: Error during Websocket handshake: Unspected response code: 404
[webpack-dev-server] (error message)
[webpack-dev-server] Trying to reconnect... 

Constantly repeats

Codex101 avatar May 01 '23 00:05 Codex101

@pmmmwh Do you know where the plugin sends a the websocket connection request to webpack-dev-server, using the default /ws url? Trying to suppress this error on local. I cannot find where the ws requests get sent off.

Codex101 avatar May 24 '23 05:05 Codex101

@pmmmwh Do you know where the plugin sends a the websocket connection request to webpack-dev-server, using the default /ws url? Trying to suppress this error on local. I cannot find where the ws requests get sent off.

I did a text search on GitHub for "ws" and I found this: https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/22ace4ce61d9129d974071ffa4795d04121c60e7/sockets/utils/getSocketUrlParts.js#L81

I'm not sure if this code needs to be changed

ChocolateLoverRaj avatar May 24 '23 15:05 ChocolateLoverRaj

//@ChocolateLoverRaj The urlParts.pathname actually does pick up the webpack websocketUrl config value.

eg, hardcoding the urlParts.pathname into my desired format doesn't work.

  if (!urlParts.pathname) {
    if (metadata.version === 4) {
      // This is hard-coded in WDS v4
      urlParts.pathname = 'dist/ws';
    } else {
      // This is hard-coded in WDS v3
      urlParts.pathname = '/sockjs-node';
    }
  }

It's very weird, in WDSSocket.js does create a connection with the correct websocketUrl value from webpack, ws://localhost:1212/dist/ws. However, the react refresh plugin just sends websocket connection requests to 'ws://localhost/ws`, same error my first comment.

Codex101 avatar May 24 '23 23:05 Codex101

/ws is actually hardcoded in webpack-dev-server. We should try migrating to their newer API where the dev server can be imported and used directly ... but fixing this fallback of constructing the socket client could be valuable as well.

@Codex101 perhaps you need to set the port properly?

pmmmwh avatar Aug 09 '23 14:08 pmmmwh