refactor: drop Webpack 4 and WDS 3 support

Author: pmmmwh

.circleci/config.yml

@@ -5,18 +5,18 @@ anchors:
     - '18.20'
     - '20.14'
     - '22.2'
-  - &webpack-version-enum
+  - &wds-version-enum
     - '4'
     - '5'
   - &node-version-param
     node-version:
       default: '20.14'
       enum: *node-version-enum
       type: enum
-  - &webpack-version-param
-    webpack-version:
+  - &wds-version-param
+    wds-version:
       default: '5'
-      enum: *webpack-version-enum
+      enum: *wds-version-enum
       type: enum
 
 commands:
@@ -70,26 +70,13 @@ jobs:
       node-version: << parameters.node-version >>
     parameters:
       <<: *node-version-param
-      <<: *webpack-version-param
+      <<: *wds-version-param
     parallelism: 4
     working_directory: ~/project
     steps:
       - checkout
       - install-deps:
           node-version: << parameters.node-version >>
-      - when:
-          condition:
-            equal:
-              - '4'
-              - << parameters.webpack-version >>
-          steps:
-            - run:
-                name: Use legacy OpenSSL provider if necessary
-                command: |-
-                  if node scripts/node-version.js; then
-                    echo "export NODE_OPTIONS=--openssl-legacy-provider" >> $BASH_ENV
-                    source $BASH_ENV
-                  fi
       - run:
           name: Run Tests
           command: |
@@ -99,7 +86,7 @@ jobs:
             JEST_JUNIT_ADD_FILE_ATTRIBUTE: 'true'
             JEST_JUNIT_OUTPUT_DIR: test-results/jest
             JEST_JUNIT_OUTPUT_NAME: results.xml
-            WEBPACK_VERSION: << parameters.webpack-version >>
+            WDS_VERSION: << parameters.wds-version >>
       - store_test_results:
           path: test-results
       - store_artifacts:
@@ -113,5 +100,5 @@ workflows:
           matrix:
             parameters:
               node-version: *node-version-enum
-              webpack-version: *webpack-version-enum
-          name: test/node:<< matrix.node-version >>/webpack:<< matrix.webpack-version >>
+              wds-version: *wds-version-enum
+          name: test/node:<< matrix.node-version >>/wds:<< matrix.wds-version >>

.eslintrc.json

@@ -32,7 +32,6 @@
       "globals": {
         "__DEBUG__": true,
         "WDS_VERSION": true,
-        "WEBPACK_VERSION": true,
         "browser": true,
         "window": true
       },

client/ErrorOverlayEntry.js

@@ -1,8 +1,7 @@
-/* global __react_refresh_error_overlay__, __react_refresh_socket__, __resourceQuery */
+/* global __react_refresh_error_overlay__, __react_refresh_socket__ */
 
 const events = require('./utils/errorEventHandlers.js');
 const formatWebpackErrors = require('./utils/formatWebpackErrors.js');
-const runWithPatchedUrl = require('./utils/patchUrl.js');
 const runWithRetry = require('./utils/retry.js');
 
 // Setup error states
@@ -74,27 +73,29 @@ function compileMessageHandler(message) {
 
 if (process.env.NODE_ENV !== 'production') {
   if (typeof window !== 'undefined') {
-    runWithPatchedUrl(function setupOverlay() {
-      // Only register if no other overlay have been registered
-      if (!window.__reactRefreshOverlayInjected && __react_refresh_socket__) {
-        // Registers handlers for compile errors with retry -
-        // This is to prevent mismatching injection order causing errors to be thrown
-        runWithRetry(function initSocket() {
-          __react_refresh_socket__.init(compileMessageHandler, __resourceQuery);
-        }, 3);
-        // Registers handlers for runtime errors
-        events.handleError(function handleError(error) {
-          hasRuntimeErrors = true;
-          __react_refresh_error_overlay__.handleRuntimeError(error);
-        });
-        events.handleUnhandledRejection(function handleUnhandledPromiseRejection(error) {
-          hasRuntimeErrors = true;
-          __react_refresh_error_overlay__.handleRuntimeError(error);
-        });
+    // Only register if no other overlay have been registered
+    if (!window.__reactRefreshOverlayInjected && __react_refresh_socket__) {
+      // Registers handlers for compile errors with retry -
+      // This is to prevent mismatching injection order causing errors to be thrown
+      runWithRetry(
+        function initSocket() {
+          __react_refresh_socket__.init(compileMessageHandler);
+        },
+        3,
+        'Failed to set up the socket connection.'
+      );
+      // Registers handlers for runtime errors
+      events.handleError(function handleError(error) {
+        hasRuntimeErrors = true;
+        __react_refresh_error_overlay__.handleRuntimeError(error);
+      });
+      events.handleUnhandledRejection(function handleUnhandledPromiseRejection(error) {
+        hasRuntimeErrors = true;
+        __react_refresh_error_overlay__.handleRuntimeError(error);
+      });
 
-        // Mark overlay as injected to prevent double-injection
-        window.__reactRefreshOverlayInjected = true;
-      }
-    });
+      // Mark overlay as injected to prevent double-injection
+      window.__reactRefreshOverlayInjected = true;
+    }
   }
 }

client/utils/patchUrl.js

@@ -1,8 +1,8 @@
-function runWithRetry(callback, maxRetries) {
+function runWithRetry(callback, maxRetries, message) {
   function executeWithRetryAndTimeout(currentCount) {
     try {
       if (currentCount > maxRetries - 1) {
-        console.warn('[React Refresh] Failed to set up the socket connection.');
+        console.warn('[React Refresh]', message);
         return;
       }
 

client/utils/retry.js

@@ -150,11 +150,6 @@ interface ErrorOverlayOptions {
   entry?: string | false;
   module?: string | false;
   sockIntegration?: 'wds' | 'whm' | 'wps' | false | string;
-  sockHost?: string;
-  sockPath?: string;
-  sockPort?: number;
-  sockProtocol?: 'http' | 'https' | 'ws' | 'wss';
-  useURLPolyfill?: boolean;
 }
 ```
 
@@ -223,58 +218,3 @@ Common HMR integrations (for Webpack) are support by this plugin out-of-the-box:
 If you use any other HMR integrations (e.g. custom ones), or if you want to customise how the connection is being setup,
 you will need to implement a message client in the provided file/module.
 You can reference implementations inside the [`sockets`](https://github.com/pmmmwh/react-refresh-webpack-plugin/tree/main/sockets) directory.
-
-#### `sockHost`
-
-Default: Parsed from current URL
-
-Type: `string`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Set a custom host for the error overlay to listen to Webpack build messages.
-Useful if you set `devServer.sockHost` to something other than `window.location.hostname`.
-
-#### `sockPort`
-
-Default: Parsed from current URL
-
-Type: `number`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Set a custom port for the error overlay to listen to Webpack build messages.
-Useful if you set `devServer.sockPort` to something other than `window.location.port`.
-
-#### `sockPath`
-
-Default: `/ws` for WDS v4, `/sockjs-node` for WDS v3
-
-Type: `string`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Set a custom path for the error overlay to listen to Webpack build messages.
-Useful if you set `devServer.sockPath` to something other than `/sockjs-node`.
-
-#### `sockProtocol`
-
-Default: Parsed from current URL
-
-Type: `http`, `https`, `ws` or `wss`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Force a protocol for the error overlay to listen for Webpack build messages.
-Useful if you want to enforce https communication, or if you're working under a non-HTTP path.
-
-#### `useURLPolyfill`
-
-Default: Detected from availability in the global scope
-
-Type: `boolean`
-
-**This is relevant for `webpack-dev-server` only.**
-
-Uses a polyfill for the DOM URL API to maintain compatibility in IE11.
-This is only applied to code from the plugin.

docs/API.md

@@ -15,30 +15,6 @@ This has to be done because, internally,
 `react-hot-loader` intercepts and reconciles the React tree before React can try to re-render it.
 That in turn breaks mechanisms the plugin depends on to deliver the experience.
 
-## Compatibility with IE11 (`webpack-dev-server` only)
-
-Our socket implementation depends on the DOM URL API,
-and as a consequence, a polyfill is needed when running in IE11.
-
-The plugin by default will detect whether the `URL` and `URLSearchParams` constructors are available on the global scope,
-and will fallback to a pony-fill approach (polyfill without global scope pollution) when it is not.
-
-If for some reason you need to force this behaviour,
-e.g. working on browsers with a broken URL implementation,
-you can use the `overlay.useURLPolyfill` option:
-
-```js
-module.exports = {
-  plugins: [
-    new ReactRefreshPlugin({
-      overlay: {
-        useURLPolyfill: true,
-      },
-    }),
-  ],
-};
-```
-
 ## Compatibility with `npm@7`
 
 `npm@7` have brought back the behaviour of auto-installing peer dependencies with new semantics,
@@ -332,21 +308,3 @@ module.exports = {
   ],
 };
 ```
-
-## Webpack 5 compatibility issues with `webpack-dev-server@3`
-
-In `webpack-dev-server@3`,
-there is a bug causing it to mis-judge the runtime environment when the Webpack 5 `browserslist` target is used.
-
-It then fallbacks to thinking a non-browser target is being used,
-in turn skipping injection of the HMR runtime,
-and thus breaking downstream integrations like this plugin.
-
-To overcome this,
-you can conditionally apply the `browserslist` only in production modes in your Webpack configuration:
-
-```js
-module.exports = {
-  target: process.env.NODE_ENV !== 'production' ? 'web' : 'browserslist',
-};
-```

docs/TROUBLESHOOTING.md

@@ -6,17 +6,3 @@
 module.exports.getRefreshGlobalScope = (runtimeGlobals) => {
   return `${runtimeGlobals.require || '__webpack_require__'}.$Refresh$`;
 };
-
-/**
- * Gets current Webpack version according to features on the compiler instance.
- * @param {import('webpack').Compiler} compiler The current Webpack compiler instance.
- * @returns {number} The current Webpack version.
- */
-module.exports.getWebpackVersion = (compiler) => {
-  if (!compiler.hooks) {
-    throw new Error(`[ReactRefreshPlugin] Webpack version is not supported!`);
-  }
-
-  // Webpack v5+ implements compiler caching
-  return 'cache' in compiler ? 5 : 4;
-};