pmmmwh / react-refresh-webpack-plugin

A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
MIT License
3.15k stars 193 forks source link

Does not use `webSocketURL` #742

Open ChocolateLoverRaj opened 1 year ago

ChocolateLoverRaj commented 1 year ago

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

pmmmwh commented 1 year ago

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

Codex101 commented 1 year ago

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 commented 1 year ago

@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.

ChocolateLoverRaj commented 1 year ago

@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

Codex101 commented 1 year ago

//@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.

pmmmwh commented 1 year ago

/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?