search

webpack / webpack-dev-server

Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.
MIT License
7.78k stars 1.43k forks source link

Expose Socket Client for external integrations #4261

Closed pmmmwh closed 2 years ago

pmmmwh commented 2 years ago

Feature Proposal

Allow external integrations to tap into the socket client of WDS in order to consume compilation events, such as build logs, errors, progress, etc.

Right now, the client is done as a module level singleton:

https://github.com/webpack/webpack-dev-server/blob/87401b4927c75f1c5114508216101fd1a3ec9e67/client-src/socket.js#L19

Perhaps we can assign it to some special global variable on window, or export this variable, so external parties can just consume the client.

Feature Use Case

This is mainly for custom error overlays that include wider coverage outside of what WDS provides (react-error-overlay, overlay from @pmmmwh/react-refresh-webpack-plugin), but it would also enable client-only tooling to sniff on HMR lifecycle, build status and more.

It is not impossible to achieve this functionality right now since the __webpack_dev_server_client__ global is defined, and we can use that as a starting point, but we would have to do two things that is not preferrable:

  1. Duplicate socket URL logic - which tightly couples the code to 1 version of WDS (and we have to keep up with all the special cases handled here)
  2. Duplicate socket connection - since we have to create the client from scratch, the connection would happen multiple times, which could be confusing to users (#4224, https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/279, https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/481)

Inspirations

webpack-hot-middleware

https://github.com/webpack-contrib/webpack-hot-middleware/blob/e140693fa3f648c078a47a678d66b53579f28ee2/client.js#L148-L159

alexander-akait commented 2 years ago

I am fine with it, do you want to send a PR?

pmmmwh commented 2 years ago

Will send a PR sometime this week šŸ‘šŸ»

alexander-akait commented 2 years ago

Thanks :+1:

christianpalazzo1 commented 1 week ago

Hello.. I comment this old PR closed because I have the same issue on disabling the error overlay by configuration, the instruction:

devServer.client.overlay = false

is simply ignored. I also tried by disabling it using css and a js script tag in the web page, without success.

We use @pmmmwh/react-refresh-webpack-plugin lib at version 0.5.10 but I have the same issue upgrading to version 0.5.15

Can you please confirm that this issue has been solved? If so, which version of the library should I install?

pmmmwh commented 1 day ago

Can you please confirm that this issue has been solved? If so, which version of the library should I install?

Please read docs for react-refresh-webpack-plugin - you should disable the overlay in its options.