From 4e5d8eae654ef382697722c6406dbc96207594aa Mon Sep 17 00:00:00 2001
From: Alexander Akait <4567934+alexander-akait@users.noreply.github.com>
Date: Wed, 22 Dec 2021 19:01:43 +0300
Subject: [PATCH] fix: droped `url` package (#4132)

---
 .eslintrc.js                                  |  15 +++
 client-src/clients/SockJSClient.js            |  10 +-
 client-src/index.js                           |  45 +++++++-
 client-src/overlay.js                         |  36 +++++-
 client-src/socket.js                          |  25 ++++-
 client-src/utils/createSocketURL.js           |  80 ++++++++++++-
 client-src/utils/getCurrentScriptSource.js    |   3 +
 client-src/utils/parseURL.js                  |  39 ++++---
 client-src/utils/reloadApp.js                 |  16 ++-
 client-src/utils/sendMessage.js               |   2 +-
 client-src/webpack.config.js                  |   4 +
 package-lock.json                             | 106 ++++++------------
 package.json                                  |   2 +-
 setupTest.js                                  |   2 +-
 .../multi-compiler.test.js.snap.webpack5      |  12 +-
 test/e2e/api.test.js                          |   4 +-
 16 files changed, 276 insertions(+), 125 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 654f4758f1..24127cd2b2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,6 +21,21 @@ module.exports = {
     "prefer-rest-params": "off",
     strict: ["error", "safe"],
     "global-require": "off",
+    "spaced-comment": [
+      "error",
+      "always",
+      {
+        line: {
+          exceptions: ["-", "+"],
+          markers: ["=", "!", "/"],
+        },
+        block: {
+          exceptions: ["-", "+"],
+          markers: ["=", "!"],
+          balanced: false,
+        },
+      },
+    ],
   },
   overrides: [
     {
diff --git a/client-src/clients/SockJSClient.js b/client-src/clients/SockJSClient.js
index 0f90bb6da1..2958d44eef 100644
--- a/client-src/clients/SockJSClient.js
+++ b/client-src/clients/SockJSClient.js
@@ -38,8 +38,12 @@ export default class SockJSClient {
    * @param {(...args: any[]) => void} f
    */
   onMessage(f) {
-    this.sock.onmessage = (e) => {
-      f(e.data);
-    };
+    this.sock.onmessage =
+      /**
+       * @param {Error & { data: string }} e
+       */
+      (e) => {
+        f(e.data);
+      };
   }
 }
diff --git a/client-src/index.js b/client-src/index.js
index d8f832c987..dc85fdcff0 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -1,5 +1,5 @@
 /* global __resourceQuery, __webpack_hash__ */
-
+/// <reference types="webpack/module" />
 import webpackHotLog from "webpack/hot/log.js";
 import stripAnsi from "./modules/strip-ansi/index.js";
 import parseURL from "./utils/parseURL.js";
@@ -10,6 +10,26 @@ import sendMessage from "./utils/sendMessage.js";
 import reloadApp from "./utils/reloadApp.js";
 import createSocketURL from "./utils/createSocketURL.js";
 
+/**
+ * @typedef {Object} Options
+ * @property {boolean} hot
+ * @property {boolean} liveReload
+ * @property {boolean} progress
+ * @property {boolean | { warnings?: boolean, errors?: boolean }} overlay
+ * @property {string} [logging]
+ * @property {number} [reconnect]
+ */
+
+/**
+ * @typedef {Object} Status
+ * @property {boolean} isUnloading
+ * @property {string} currentHash
+ * @property {string} [previousHash]
+ */
+
+/**
+ * @type {Status}
+ */
 const status = {
   isUnloading: false,
   // TODO Workaround for webpack v4, `__webpack_hash__` is not replaced without HotModuleReplacement
@@ -17,6 +37,7 @@ const status = {
   currentHash: typeof __webpack_hash__ !== "undefined" ? __webpack_hash__ : "",
 };
 
+/** @type {Options} */
 const options = {
   hot: false,
   liveReload: false,
@@ -101,6 +122,9 @@ const onSocketMessage = {
     status.currentHash = hash;
   },
   logging: setAllLogLevel,
+  /**
+   * @param {boolean} value
+   */
   overlay(value) {
     if (typeof document === "undefined") {
       return;
@@ -108,6 +132,9 @@ const onSocketMessage = {
 
     options.overlay = value;
   },
+  /**
+   * @param {number} value
+   */
   reconnect(value) {
     if (parsedResourceQuery.reconnect === "false") {
       return;
@@ -115,9 +142,15 @@ const onSocketMessage = {
 
     options.reconnect = value;
   },
-  progress(progress) {
-    options.progress = progress;
+  /**
+   * @param {boolean} value
+   */
+  progress(value) {
+    options.progress = value;
   },
+  /**
+   * @param {{ pluginName?: string, percent: number, msg: string }} data
+   */
   "progress-update": function progressUpdate(data) {
     if (options.progress) {
       log.info(
@@ -148,6 +181,9 @@ const onSocketMessage = {
     reloadApp(options, status);
   },
   // TODO: remove in v5 in favor of 'static-changed'
+  /**
+   * @param {string} file
+   */
   "content-changed": function contentChanged(file) {
     log.info(
       `${
@@ -157,6 +193,9 @@ const onSocketMessage = {
 
     self.location.reload();
   },
+  /**
+   * @param {string} file
+   */
   "static-changed": function staticChanged(file) {
     log.info(
       `${
diff --git a/client-src/overlay.js b/client-src/overlay.js
index 819597ed15..5c074702ff 100644
--- a/client-src/overlay.js
+++ b/client-src/overlay.js
@@ -17,8 +17,11 @@ const colors = {
   darkgrey: "6D7891",
 };
 
+/** @type {HTMLIFrameElement | null | undefined} */
 let iframeContainerElement;
+/** @type {HTMLDivElement | null | undefined} */
 let containerElement;
+/** @type {Array<(element: HTMLDivElement) => void>} */
 let onLoadQueue = [];
 
 ansiHTML.setColors(colors);
@@ -38,7 +41,11 @@ function createContainer() {
   iframeContainerElement.style.zIndex = 9999999999;
   iframeContainerElement.onload = () => {
     containerElement =
-      iframeContainerElement.contentDocument.createElement("div");
+      /** @type {Document} */
+      (
+        /** @type {HTMLIFrameElement} */
+        (iframeContainerElement).contentDocument
+      ).createElement("div");
     containerElement.id = "webpack-dev-server-client-overlay-div";
     containerElement.style.position = "fixed";
     containerElement.style.boxSizing = "border-box";
@@ -71,6 +78,7 @@ function createContainer() {
     closeButtonElement.style.color = "white";
     closeButtonElement.style.cursor = "pointer";
     closeButtonElement.style.cssFloat = "right";
+    // @ts-ignore
     closeButtonElement.style.styleFloat = "right";
     closeButtonElement.addEventListener("click", () => {
       hide();
@@ -81,19 +89,27 @@ function createContainer() {
     containerElement.appendChild(document.createElement("br"));
     containerElement.appendChild(document.createElement("br"));
 
-    iframeContainerElement.contentDocument.body.appendChild(containerElement);
+    /** @type {Document} */
+    (
+      /** @type {HTMLIFrameElement} */
+      (iframeContainerElement).contentDocument
+    ).body.appendChild(containerElement);
 
     onLoadQueue.forEach((onLoad) => {
-      onLoad(containerElement);
+      onLoad(/** @type {HTMLDivElement} */ (containerElement));
     });
     onLoadQueue = [];
 
-    iframeContainerElement.onload = null;
+    /** @type {HTMLIFrameElement} */
+    (iframeContainerElement).onload = null;
   };
 
   document.body.appendChild(iframeContainerElement);
 }
 
+/**
+ * @param {(element: HTMLDivElement) => void} callback
+ */
 function ensureOverlayExists(callback) {
   if (containerElement) {
     // Everything is ready, call the callback right away.
@@ -124,6 +140,11 @@ function hide() {
   containerElement = null;
 }
 
+/**
+ * @param {string} type
+ * @param {string  | { file?: string, moduleName?: string, loc?: string, message?: string }} item
+ * @returns {{ header: string, body: string }}
+ */
 function formatProblem(type, item) {
   let header = type === "warning" ? "WARNING" : "ERROR";
   let body = "";
@@ -154,6 +175,10 @@ function formatProblem(type, item) {
 }
 
 // Compilation with errors (e.g. syntax error or missing modules).
+/**
+ * @param {string} type
+ * @param {Array<string  | { file?: string, moduleName?: string, loc?: string, message?: string }>} messages
+ */
 function show(type, messages) {
   ensureOverlayExists(() => {
     messages.forEach((message) => {
@@ -177,7 +202,8 @@ function show(type, messages) {
       entryElement.appendChild(document.createElement("br"));
       entryElement.appendChild(document.createElement("br"));
 
-      containerElement.appendChild(entryElement);
+      /** @type {HTMLDivElement} */
+      (containerElement).appendChild(entryElement);
     });
   });
 }
diff --git a/client-src/socket.js b/client-src/socket.js
index dc76cd295b..4b913e4c69 100644
--- a/client-src/socket.js
+++ b/client-src/socket.js
@@ -18,12 +18,20 @@ let retries = 0;
 let maxRetries = 10;
 let client = null;
 
+/**
+ * @param {string} url
+ * @param {{ [handler: string]: (data?: any, params?: any) => any }} handlers
+ * @param {number} [reconnect]
+ */
 const socket = function initSocket(url, handlers, reconnect) {
   client = new Client(url);
 
   client.onOpen(() => {
     retries = 0;
-    maxRetries = reconnect;
+
+    if (typeof reconnect !== "undefined") {
+      maxRetries = reconnect;
+    }
   });
 
   client.onClose(() => {
@@ -51,13 +59,18 @@ const socket = function initSocket(url, handlers, reconnect) {
     }
   });
 
-  client.onMessage((data) => {
-    const message = JSON.parse(data);
+  client.onMessage(
+    /**
+     * @param {any} data
+     */
+    (data) => {
+      const message = JSON.parse(data);
 
-    if (handlers[message.type]) {
-      handlers[message.type](message.data, message.params);
+      if (handlers[message.type]) {
+        handlers[message.type](message.data, message.params);
+      }
     }
-  });
+  );
 };
 
 export default socket;
diff --git a/client-src/utils/createSocketURL.js b/client-src/utils/createSocketURL.js
index 168c3b6c9e..5d8a28ddbd 100644
--- a/client-src/utils/createSocketURL.js
+++ b/client-src/utils/createSocketURL.js
@@ -1,12 +1,82 @@
-import url from "url";
+/**
+ * @param {{ protocol?: string, auth?: string, hostname?: string, port?: string, pathname?: string, search?: string, hash?: string, slashes?: boolean }} objURL
+ * @returns {string}
+ */
+function format(objURL) {
+  let protocol = objURL.protocol || "";
+
+  if (protocol && protocol.substr(-1) !== ":") {
+    protocol += ":";
+  }
+
+  let auth = objURL.auth || "";
+
+  if (auth) {
+    auth = encodeURIComponent(auth);
+    auth = auth.replace(/%3A/i, ":");
+    auth += "@";
+  }
+
+  let host = "";
+
+  if (objURL.hostname) {
+    host =
+      auth +
+      (objURL.hostname.indexOf(":") === -1
+        ? objURL.hostname
+        : `[${objURL.hostname}]`);
+
+    if (objURL.port) {
+      host += `:${objURL.port}`;
+    }
+  }
+
+  let pathname = objURL.pathname || "";
+
+  if (objURL.slashes) {
+    host = `//${host || ""}`;
+
+    if (pathname && pathname.charAt(0) !== "/") {
+      pathname = `/${pathname}`;
+    }
+  } else if (!host) {
+    host = "";
+  }
+
+  let search = objURL.search || "";
+
+  if (search && search.charAt(0) !== "?") {
+    search = `?${search}`;
+  }
+
+  let hash = objURL.hash || "";
+
+  if (hash && hash.charAt(0) !== "#") {
+    hash = `#${hash}`;
+  }
+
+  pathname = pathname.replace(
+    /[?#]/g,
+    /**
+     * @param {string} match
+     * @returns {string}
+     */
+    (match) => encodeURIComponent(match)
+  );
+  search = search.replace("#", "%23");
+
+  return `${protocol}${host}${pathname}${search}${hash}`;
+}
 
-// We handle legacy API that is Node.js specific, and a newer API that implements the same WHATWG URL Standard used by web browsers
-// Please look at https://nodejs.org/api/url.html#url_url_strings_and_url_objects
+/**
+ * @param {URL & { fromCurrentScript?: boolean }} parsedURL
+ * @returns {string}
+ */
 function createSocketURL(parsedURL) {
   let { hostname } = parsedURL;
 
   // Node.js module parses it as `::`
-  // `new URL(urlString, [baseURLstring])` parses it as '[::]'
+  // `new URL(urlString, [baseURLString])` parses it as '[::]'
   const isInAddrAny =
     hostname === "0.0.0.0" || hostname === "::" || hostname === "[::]";
 
@@ -80,7 +150,7 @@ function createSocketURL(parsedURL) {
     socketURLPathname = parsedURL.pathname;
   }
 
-  return url.format({
+  return format({
     protocol: socketURLProtocol,
     auth: socketURLAuth,
     hostname: socketURLHostname,
diff --git a/client-src/utils/getCurrentScriptSource.js b/client-src/utils/getCurrentScriptSource.js
index 01b05cb66d..2c16610389 100644
--- a/client-src/utils/getCurrentScriptSource.js
+++ b/client-src/utils/getCurrentScriptSource.js
@@ -1,3 +1,6 @@
+/**
+ * @returns {string}
+ */
 function getCurrentScriptSource() {
   // `document.currentScript` is the most accurate way to find the current script,
   // but is not supported in all browsers.
diff --git a/client-src/utils/parseURL.js b/client-src/utils/parseURL.js
index 9be4077d25..3a4f2f3fda 100644
--- a/client-src/utils/parseURL.js
+++ b/client-src/utils/parseURL.js
@@ -1,7 +1,11 @@
-import url from "url";
 import getCurrentScriptSource from "./getCurrentScriptSource.js";
 
+/**
+ * @param {string} resourceQuery
+ * @returns {{ [key: string]: string | boolean }}
+ */
 function parseURL(resourceQuery) {
+  /** @type {{ [key: string]: string }} */
   let options = {};
 
   if (typeof resourceQuery === "string" && resourceQuery !== "") {
@@ -16,25 +20,20 @@ function parseURL(resourceQuery) {
     // Else, get the url from the <script> this file was called with.
     const scriptSource = getCurrentScriptSource();
 
-    if (scriptSource) {
-      let scriptSourceURL;
-
-      try {
-        // The placeholder `baseURL` with `window.location.href`,
-        // is to allow parsing of path-relative or protocol-relative URLs,
-        // and will have no effect if `scriptSource` is a fully valid URL.
-        scriptSourceURL = new URL(scriptSource, self.location.href);
-      } catch (error) {
-        // URL parsing failed, do nothing.
-        // We will still proceed to see if we can recover using `resourceQuery`
-      }
-
-      if (scriptSourceURL) {
-        options = scriptSourceURL;
-        options.fromCurrentScript = true;
-      }
-    } else {
-      options = url.parse(self.location.href, true, true);
+    let scriptSourceURL;
+
+    try {
+      // The placeholder `baseURL` with `window.location.href`,
+      // is to allow parsing of path-relative or protocol-relative URLs,
+      // and will have no effect if `scriptSource` is a fully valid URL.
+      scriptSourceURL = new URL(scriptSource, self.location.href);
+    } catch (error) {
+      // URL parsing failed, do nothing.
+      // We will still proceed to see if we can recover using `resourceQuery`
+    }
+
+    if (scriptSourceURL) {
+      options = scriptSourceURL;
       options.fromCurrentScript = true;
     }
   }
diff --git a/client-src/utils/reloadApp.js b/client-src/utils/reloadApp.js
index 8dfbffde3d..a60051c528 100644
--- a/client-src/utils/reloadApp.js
+++ b/client-src/utils/reloadApp.js
@@ -1,20 +1,30 @@
-/* global __webpack_hash__ */
-
 import hotEmitter from "webpack/hot/emitter.js";
 import { log } from "./log.js";
 
+/** @typedef {import("../index").Options} Options
+/** @typedef {import("../index").Status} Status
+
+/**
+ * @param {Options} options
+ * @param {Status} status
+ */
 function reloadApp({ hot, liveReload }, status) {
   if (status.isUnloading) {
     return;
   }
 
   const { currentHash, previousHash } = status;
-  const isInitial = currentHash.indexOf(previousHash) >= 0;
+  const isInitial =
+    currentHash.indexOf(/** @type {string} */ (previousHash)) >= 0;
 
   if (isInitial) {
     return;
   }
 
+  /**
+   * @param {Window} rootWindow
+   * @param {number} intervalId
+   */
   function applyReload(rootWindow, intervalId) {
     clearInterval(intervalId);
 
diff --git a/client-src/utils/sendMessage.js b/client-src/utils/sendMessage.js
index 1fb2d42298..46f0914861 100644
--- a/client-src/utils/sendMessage.js
+++ b/client-src/utils/sendMessage.js
@@ -3,7 +3,7 @@
 // Send messages to the outside, so plugins can consume it.
 /**
  * @param {string} type
- * @param {any} data
+ * @param {any} [data]
  */
 function sendMsg(type, data) {
   if (
diff --git a/client-src/webpack.config.js b/client-src/webpack.config.js
index d04ad449f3..6242831a94 100644
--- a/client-src/webpack.config.js
+++ b/client-src/webpack.config.js
@@ -48,6 +48,7 @@ module.exports = [
   merge(baseForModules, {
     entry: path.join(__dirname, "modules/logger/index.js"),
     output: {
+      // @ts-ignore
       filename: "logger/index.js",
     },
     module: {
@@ -57,6 +58,7 @@ module.exports = [
           use: [
             {
               loader: "babel-loader",
+              // @ts-ignore
               options: {
                 plugins: ["@babel/plugin-transform-object-assign"],
               },
@@ -79,6 +81,7 @@ module.exports = [
   merge(baseForModules, {
     entry: path.join(__dirname, "modules/strip-ansi/index.js"),
     output: {
+      // @ts-ignore
       filename: "strip-ansi/index.js",
     },
   }),
@@ -86,6 +89,7 @@ module.exports = [
     entry: path.join(__dirname, "modules/sockjs-client/index.js"),
     output: {
       filename: "sockjs-client/index.js",
+      // @ts-ignore
       library: "SockJS",
       libraryTarget: "umd",
       globalObject: "(typeof self !== 'undefined' ? self : this)",
diff --git a/package-lock.json b/package-lock.json
index e8dd0d7f09..efe6a19822 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,6 @@
         "sockjs": "^0.3.21",
         "spdy": "^4.0.2",
         "strip-ansi": "^7.0.0",
-        "url": "^0.11.0",
         "webpack-dev-middleware": "^5.3.0",
         "ws": "^8.1.0"
       },
@@ -55,6 +54,7 @@
         "@commitlint/config-conventional": "^15.0.0",
         "@types/compression": "^1.7.2",
         "@types/default-gateway": "^3.0.1",
+        "@types/sockjs-client": "^1.5.1",
         "acorn": "^8.2.4",
         "babel-jest": "^27.4.4",
         "babel-loader": "^8.2.2",
@@ -3443,6 +3443,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/sockjs-client": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@types/sockjs-client/-/sockjs-client-1.5.1.tgz",
+      "integrity": "sha512-bmZM6A1GPdjF0bcuIUC+50hZEMGkzMsiG9by6X9U+7IZFOiPtz7MJ9h05FSpPVxlj4i+TzzoG3ESo1FJlbLb6A==",
+      "dev": true
+    },
     "node_modules/@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -4615,9 +4621,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001291",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001291.tgz",
-      "integrity": "sha512-roMV5V0HNGgJ88s42eE70sstqGW/gwFndosYrikHthw98N5tLnOTxFqMLQjZVRxTWFlJ4rn+MsgXrR7MDPY4jA==",
+      "version": "1.0.30001292",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz",
+      "integrity": "sha512-jnT4Tq0Q4ma+6nncYQVe7d73kmDmE9C3OGTx3MvW7lBM/eY1S1DZTMBON7dqV481RhNiS5OxD7k9JQvmDOTirw==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/browserslist"
@@ -6073,9 +6079,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.25",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.25.tgz",
-      "integrity": "sha512-bTwub9Y/76EiNmfaiJih+hAy6xn7Ns95S4KvI2NuKNOz8TEEKKQUu44xuy0PYMudjM9zdjKRS1bitsUvHTfuUg=="
+      "version": "1.4.26",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.26.tgz",
+      "integrity": "sha512-cA1YwlRzO6TGp7yd3+KAqh9Tt6Z4CuuKqsAJP6uF/H5MQryjAGDhMhnY5cEXo8MaRCczpzSBhMPdqRIodkbZYw=="
     },
     "node_modules/emittery": {
       "version": "0.8.1",
@@ -12864,9 +12870,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.7.tgz",
-      "integrity": "sha512-U+b/Deoi4I/UmE6KOVPpnhS7I7AYdKbhGcat+qTQ27gycvaACvNEw11ba6RrkwVmDVRW7sigWgLj4/KbbJjeDA==",
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz",
+      "integrity": "sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -13025,9 +13031,9 @@
       }
     },
     "node_modules/puppeteer": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-13.0.0.tgz",
-      "integrity": "sha512-kZfGAieIVSo4bFqYuvY2KvhgP9txzmPbbnpZIzLlfdt8nEu9evXEwsbBt1BHocVQM4fJmCiS+FRyw7c8aWadNg==",
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-13.0.1.tgz",
+      "integrity": "sha512-wqGIx59LzYqWhYcJQphMT+ux0sgatEUbjKG0lbjJxNVqVIT3ZC5m4Bvmq2gHE3qhb63EwS+rNkql08bm4BvO0A==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
@@ -13171,15 +13177,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -15362,15 +15359,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
     "node_modules/url-loader": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
@@ -15440,11 +15428,6 @@
         "requires-port": "^1.0.0"
       }
     },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -18614,6 +18597,12 @@
         "@types/node": "*"
       }
     },
+    "@types/sockjs-client": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@types/sockjs-client/-/sockjs-client-1.5.1.tgz",
+      "integrity": "sha512-bmZM6A1GPdjF0bcuIUC+50hZEMGkzMsiG9by6X9U+7IZFOiPtz7MJ9h05FSpPVxlj4i+TzzoG3ESo1FJlbLb6A==",
+      "dev": true
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -19544,9 +19533,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001291",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001291.tgz",
-      "integrity": "sha512-roMV5V0HNGgJ88s42eE70sstqGW/gwFndosYrikHthw98N5tLnOTxFqMLQjZVRxTWFlJ4rn+MsgXrR7MDPY4jA=="
+      "version": "1.0.30001292",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz",
+      "integrity": "sha512-jnT4Tq0Q4ma+6nncYQVe7d73kmDmE9C3OGTx3MvW7lBM/eY1S1DZTMBON7dqV481RhNiS5OxD7k9JQvmDOTirw=="
     },
     "chalk": {
       "version": "2.4.2",
@@ -20668,9 +20657,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "electron-to-chromium": {
-      "version": "1.4.25",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.25.tgz",
-      "integrity": "sha512-bTwub9Y/76EiNmfaiJih+hAy6xn7Ns95S4KvI2NuKNOz8TEEKKQUu44xuy0PYMudjM9zdjKRS1bitsUvHTfuUg=="
+      "version": "1.4.26",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.26.tgz",
+      "integrity": "sha512-cA1YwlRzO6TGp7yd3+KAqh9Tt6Z4CuuKqsAJP6uF/H5MQryjAGDhMhnY5cEXo8MaRCczpzSBhMPdqRIodkbZYw=="
     },
     "emittery": {
       "version": "0.8.1",
@@ -25691,9 +25680,9 @@
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.7.tgz",
-      "integrity": "sha512-U+b/Deoi4I/UmE6KOVPpnhS7I7AYdKbhGcat+qTQ27gycvaACvNEw11ba6RrkwVmDVRW7sigWgLj4/KbbJjeDA==",
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.8.tgz",
+      "integrity": "sha512-D5PG53d209Z1Uhcc0qAZ5U3t5HagH3cxu+WLZ22jt3gLUpXM4eXXfiO14jiDWST3NNooX/E8wISfOhZ9eIjGTQ==",
       "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
@@ -25820,9 +25809,9 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "puppeteer": {
-      "version": "13.0.0",
-      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-13.0.0.tgz",
-      "integrity": "sha512-kZfGAieIVSo4bFqYuvY2KvhgP9txzmPbbnpZIzLlfdt8nEu9evXEwsbBt1BHocVQM4fJmCiS+FRyw7c8aWadNg==",
+      "version": "13.0.1",
+      "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-13.0.1.tgz",
+      "integrity": "sha512-wqGIx59LzYqWhYcJQphMT+ux0sgatEUbjKG0lbjJxNVqVIT3ZC5m4Bvmq2gHE3qhb63EwS+rNkql08bm4BvO0A==",
       "dev": true,
       "requires": {
         "debug": "4.3.2",
@@ -25914,11 +25903,6 @@
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.6.tgz",
       "integrity": "sha512-TIRk4aqYLNoJUbd+g2lEdz5kLWIuTMRagAXxl78Q0RiVjAOugHmeKNGdd3cwo/ktpf9aL9epCfFqWDEKysUlLQ=="
     },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
-    },
     "querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -27591,22 +27575,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
-        }
-      }
-    },
     "url-loader": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz",
diff --git a/package.json b/package.json
index 27178d1517..f40cfce057 100644
--- a/package.json
+++ b/package.json
@@ -62,7 +62,6 @@
     "sockjs": "^0.3.21",
     "spdy": "^4.0.2",
     "strip-ansi": "^7.0.0",
-    "url": "^0.11.0",
     "webpack-dev-middleware": "^5.3.0",
     "ws": "^8.1.0"
   },
@@ -78,6 +77,7 @@
     "@commitlint/config-conventional": "^15.0.0",
     "@types/compression": "^1.7.2",
     "@types/default-gateway": "^3.0.1",
+    "@types/sockjs-client": "^1.5.1",
     "acorn": "^8.2.4",
     "babel-jest": "^27.4.4",
     "babel-loader": "^8.2.2",
diff --git a/setupTest.js b/setupTest.js
index 0c7c3a98e2..c1b6006891 100644
--- a/setupTest.js
+++ b/setupTest.js
@@ -2,4 +2,4 @@
 
 process.env.CHOKIDAR_USEPOLLING = true;
 
-jest.setTimeout(140000);
+jest.setTimeout(200000);
diff --git a/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5 b/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5
index 781968f03c..2f577cc5ed 100644
--- a/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5
@@ -55,13 +55,13 @@ Array [
   "[HMR] Cannot apply update. Need to do a full reload!",
   "[HMR] Error: Aborted because ./browser.js is not accepted
 Update propagation: ./browser.js
-    at applyHandler (http://127.0.0.1:8103/browser.js:1094:31)
-    at http://127.0.0.1:8103/browser.js:794:21
+    at applyHandler (http://127.0.0.1:8103/browser.js:1017:31)
+    at http://127.0.0.1:8103/browser.js:717:21
     at Array.map (<anonymous>)
-    at internalApply (http://127.0.0.1:8103/browser.js:793:54)
-    at http://127.0.0.1:8103/browser.js:767:26
-    at waitForBlockingPromises (http://127.0.0.1:8103/browser.js:720:55)
-    at http://127.0.0.1:8103/browser.js:765:24",
+    at internalApply (http://127.0.0.1:8103/browser.js:716:54)
+    at http://127.0.0.1:8103/browser.js:690:26
+    at waitForBlockingPromises (http://127.0.0.1:8103/browser.js:643:55)
+    at http://127.0.0.1:8103/browser.js:688:24",
   "[HMR] Waiting for update signal from WDS...",
   "Hello from the browser",
   "[webpack-dev-server] Hot Module Replacement enabled.",
diff --git a/test/e2e/api.test.js b/test/e2e/api.test.js
index 085f6dcbb3..1772c01563 100644
--- a/test/e2e/api.test.js
+++ b/test/e2e/api.test.js
@@ -595,9 +595,9 @@ describe("API", () => {
 
       process.env.WEBPACK_DEV_SERVER_PORT_RETRY = retryCount;
 
-      const freePort = await Server.getFreePort(8082);
+      const freePort = await Server.getFreePort(9082);
 
-      expect(freePort).toEqual(8082);
+      expect(freePort).toEqual(9082);
     });
 
     it("should return the port when the port is `null`", async () => {