diff --git a/.cspell.json b/.cspell.json
index 75ccb46d8d..817c0ee483 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -2,6 +2,7 @@
   "version": "0.2",
   "language": "en,en-gb",
   "words": [
+    "apos",
     "camelcase",
     "tapable",
     "sockjs",
diff --git a/client-src/index.js b/client-src/index.js
index d6614a7a67..522ae993db 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -1,14 +1,11 @@
 /* global __resourceQuery, __webpack_hash__ */
 /// <reference types="webpack/module" />
 import webpackHotLog from "webpack/hot/log.js";
-import stripAnsi from "./utils/stripAnsi.js";
-import parseURL from "./utils/parseURL.js";
+import hotEmitter from "webpack/hot/emitter.js";
 import socket from "./socket.js";
 import { formatProblem, createOverlay } from "./overlay.js";
-import { log, logEnabledFeatures, setLogLevel } from "./utils/log.js";
+import { log, setLogLevel } from "./utils/log.js";
 import sendMessage from "./utils/sendMessage.js";
-import reloadApp from "./utils/reloadApp.js";
-import createSocketURL from "./utils/createSocketURL.js";
 import { isProgressSupported, defineProgressElement } from "./progress.js";
 
 /**
@@ -48,13 +45,11 @@ const decodeOverlayOptions = (overlayOptions) => {
         );
 
         // eslint-disable-next-line no-new-func
-        const overlayFilterFunction = new Function(
+        overlayOptions[property] = new Function(
           "message",
           `var callback = ${overlayFilterFunctionString}
         return callback(message)`,
         );
-
-        overlayOptions[property] = overlayFilterFunction;
       }
     });
   }
@@ -69,13 +64,75 @@ const status = {
   currentHash: __webpack_hash__,
 };
 
-/** @type {Options} */
-const options = {
-  hot: false,
-  liveReload: false,
-  progress: false,
-  overlay: false,
+/**
+ * @returns {string}
+ */
+const getCurrentScriptSource = () => {
+  // `document.currentScript` is the most accurate way to find the current script,
+  // but is not supported in all browsers.
+  if (document.currentScript) {
+    return document.currentScript.getAttribute("src");
+  }
+
+  // Fallback to getting all scripts running in the document.
+  const scriptElements = document.scripts || [];
+  const scriptElementsWithSrc = Array.prototype.filter.call(
+    scriptElements,
+    (element) => element.getAttribute("src"),
+  );
+
+  if (scriptElementsWithSrc.length > 0) {
+    const currentScript =
+      scriptElementsWithSrc[scriptElementsWithSrc.length - 1];
+
+    return currentScript.getAttribute("src");
+  }
+
+  // Fail as there was no script to use.
+  throw new Error("[webpack-dev-server] Failed to get current script source.");
 };
+
+/**
+ * @param {string} resourceQuery
+ * @returns {{ [key: string]: string | boolean }}
+ */
+const parseURL = (resourceQuery) => {
+  /** @type {{ [key: string]: string }} */
+  let result = {};
+
+  if (typeof resourceQuery === "string" && resourceQuery !== "") {
+    const searchParams = resourceQuery.slice(1).split("&");
+
+    for (let i = 0; i < searchParams.length; i++) {
+      const pair = searchParams[i].split("=");
+
+      result[pair[0]] = decodeURIComponent(pair[1]);
+    }
+  } else {
+    // Else, get the url from the <script> this file was called with.
+    const scriptSource = getCurrentScriptSource();
+
+    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) {
+      result = scriptSourceURL;
+      result.fromCurrentScript = true;
+    }
+  }
+
+  return result;
+};
+
 const parsedResourceQuery = parseURL(__resourceQuery);
 
 const enabledFeatures = {
@@ -85,6 +142,14 @@ const enabledFeatures = {
   Overlay: false,
 };
 
+/** @type {Options} */
+const options = {
+  hot: false,
+  liveReload: false,
+  progress: false,
+  overlay: false,
+};
+
 if (parsedResourceQuery.hot === "true") {
   options.hot = true;
   enabledFeatures["Hot Module Replacement"] = true;
@@ -132,18 +197,37 @@ if (typeof parsedResourceQuery.reconnect !== "undefined") {
 /**
  * @param {string} level
  */
-function setAllLogLevel(level) {
+const setAllLogLevel = (level) => {
   // This is needed because the HMR logger operate separately from dev server logger
   webpackHotLog.setLogLevel(
     level === "verbose" || level === "log" ? "info" : level,
   );
   setLogLevel(level);
-}
+};
 
 if (options.logging) {
   setAllLogLevel(options.logging);
 }
 
+const logEnabledFeatures = (features) => {
+  const listEnabledFeatures = Object.keys(features);
+  if (!features || listEnabledFeatures.length === 0) {
+    return;
+  }
+
+  let logString = "Server started:";
+
+  // Server started: Hot Module Replacement enabled, Live Reloading enabled, Overlay disabled.
+  for (let i = 0; i < listEnabledFeatures.length; i++) {
+    const key = listEnabledFeatures[i];
+    logString += ` ${key} ${features[key] ? "enabled" : "disabled"},`;
+  }
+  // replace last comma with a period
+  logString = logString.slice(0, -1).concat(".");
+
+  log.info(logString);
+};
+
 logEnabledFeatures(enabledFeatures);
 
 self.addEventListener("beforeunload", () => {
@@ -165,6 +249,96 @@ const overlay =
       )
     : { send: () => {} };
 
+/**
+ * @param {Options} options
+ * @param {Status} currentStatus
+ */
+const reloadApp = ({ hot, liveReload }, currentStatus) => {
+  if (currentStatus.isUnloading) {
+    return;
+  }
+
+  const { currentHash, previousHash } = currentStatus;
+  const isInitial =
+    currentHash.indexOf(/** @type {string} */ (previousHash)) >= 0;
+
+  if (isInitial) {
+    return;
+  }
+
+  /**
+   * @param {Window} rootWindow
+   * @param {number} intervalId
+   */
+  function applyReload(rootWindow, intervalId) {
+    clearInterval(intervalId);
+
+    log.info("App updated. Reloading...");
+
+    rootWindow.location.reload();
+  }
+
+  const search = self.location.search.toLowerCase();
+  const allowToHot = search.indexOf("webpack-dev-server-hot=false") === -1;
+  const allowToLiveReload =
+    search.indexOf("webpack-dev-server-live-reload=false") === -1;
+
+  if (hot && allowToHot) {
+    log.info("App hot update...");
+
+    hotEmitter.emit("webpackHotUpdate", currentStatus.currentHash);
+
+    if (typeof self !== "undefined" && self.window) {
+      // broadcast update to window
+      self.postMessage(`webpackHotUpdate${currentStatus.currentHash}`, "*");
+    }
+  }
+  // allow refreshing the page only if liveReload isn't disabled
+  else if (liveReload && allowToLiveReload) {
+    let rootWindow = self;
+
+    // use parent window for reload (in case we're in an iframe with no valid src)
+    const intervalId = self.setInterval(() => {
+      if (rootWindow.location.protocol !== "about:") {
+        // reload immediately if protocol is valid
+        applyReload(rootWindow, intervalId);
+      } else {
+        rootWindow = rootWindow.parent;
+
+        if (rootWindow.parent === rootWindow) {
+          // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
+          applyReload(rootWindow, intervalId);
+        }
+      }
+    });
+  }
+};
+
+const ansiRegex = new RegExp(
+  [
+    "[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)",
+    "(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))",
+  ].join("|"),
+  "g",
+);
+
+/**
+ *
+ * Strip [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_code) from a string.
+ * Adapted from code originally released by Sindre Sorhus
+ * Licensed the MIT License
+ *
+ * @param {string} string
+ * @return {string}
+ */
+const stripAnsi = (string) => {
+  if (typeof string !== "string") {
+    throw new TypeError(`Expected a \`string\`, got \`${typeof string}\``);
+  }
+
+  return string.replace(ansiRegex, "");
+};
+
 const onSocketMessage = {
   hot() {
     if (parsedResourceQuery.hot === "false") {
@@ -382,6 +556,170 @@ const onSocketMessage = {
   },
 };
 
+/**
+ * @param {{ protocol?: string, auth?: string, hostname?: string, port?: string, pathname?: string, search?: string, hash?: string, slashes?: boolean }} objURL
+ * @returns {string}
+ */
+const formatURL = (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}`;
+};
+
+/**
+ * @param {URL & { fromCurrentScript?: boolean }} parsedURL
+ * @returns {string}
+ */
+const createSocketURL = (parsedURL) => {
+  let { hostname } = parsedURL;
+
+  // Node.js module parses it as `::`
+  // `new URL(urlString, [baseURLString])` parses it as '[::]'
+  const isInAddrAny =
+    hostname === "0.0.0.0" || hostname === "::" || hostname === "[::]";
+
+  // why do we need this check?
+  // hostname n/a for file protocol (example, when using electron, ionic)
+  // see: https://github.com/webpack/webpack-dev-server/pull/384
+  if (
+    isInAddrAny &&
+    self.location.hostname &&
+    self.location.protocol.indexOf("http") === 0
+  ) {
+    hostname = self.location.hostname;
+  }
+
+  let socketURLProtocol = parsedURL.protocol || self.location.protocol;
+
+  // When https is used in the app, secure web sockets are always necessary because the browser doesn't accept non-secure web sockets.
+  if (
+    socketURLProtocol === "auto:" ||
+    (hostname && isInAddrAny && self.location.protocol === "https:")
+  ) {
+    socketURLProtocol = self.location.protocol;
+  }
+
+  socketURLProtocol = socketURLProtocol.replace(
+    /^(?:http|.+-extension|file)/i,
+    "ws",
+  );
+
+  let socketURLAuth = "";
+
+  // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
+  // Parse authentication credentials in case we need them
+  if (parsedURL.username) {
+    socketURLAuth = parsedURL.username;
+
+    // Since HTTP basic authentication does not allow empty username,
+    // we only include password if the username is not empty.
+    if (parsedURL.password) {
+      // Result: <username>:<password>
+      socketURLAuth = socketURLAuth.concat(":", parsedURL.password);
+    }
+  }
+
+  // In case the host is a raw IPv6 address, it can be enclosed in
+  // the brackets as the brackets are needed in the final URL string.
+  // Need to remove those as url.format blindly adds its own set of brackets
+  // if the host string contains colons. That would lead to non-working
+  // double brackets (e.g. [[::]]) host
+  //
+  // All of these web socket url params are optionally passed in through resourceQuery,
+  // so we need to fall back to the default if they are not provided
+  const socketURLHostname = (
+    hostname ||
+    self.location.hostname ||
+    "localhost"
+  ).replace(/^\[(.*)\]$/, "$1");
+
+  let socketURLPort = parsedURL.port;
+
+  if (!socketURLPort || socketURLPort === "0") {
+    socketURLPort = self.location.port;
+  }
+
+  // If path is provided it'll be passed in via the resourceQuery as a
+  // query param so it has to be parsed out of the querystring in order for the
+  // client to open the socket to the correct location.
+  let socketURLPathname = "/ws";
+
+  if (parsedURL.pathname && !parsedURL.fromCurrentScript) {
+    socketURLPathname = parsedURL.pathname;
+  }
+
+  return formatURL({
+    protocol: socketURLProtocol,
+    auth: socketURLAuth,
+    hostname: socketURLHostname,
+    port: socketURLPort,
+    pathname: socketURLPathname,
+    slashes: true,
+  });
+};
+
 const socketURL = createSocketURL(parsedResourceQuery);
 
 socket(socketURL, onSocketMessage, options.reconnect);
+
+export { getCurrentScriptSource, parseURL, createSocketURL };
diff --git a/client-src/overlay.js b/client-src/overlay.js
index 04670df2c0..8443fd8ced 100644
--- a/client-src/overlay.js
+++ b/client-src/overlay.js
@@ -2,22 +2,368 @@
 // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
 
 import ansiHTML from "ansi-html-community";
-import { encode } from "html-entities";
-import {
-  listenToRuntimeError,
-  listenToUnhandledRejection,
-  parseErrorToStacks,
-} from "./overlay/runtime-error.js";
-import createOverlayMachine from "./overlay/state-machine.js";
-import {
-  containerStyle,
-  dismissButtonStyle,
-  headerStyle,
-  iframeStyle,
-  msgStyles,
-  msgTextStyle,
-  msgTypeStyle,
-} from "./overlay/styles.js";
+
+/**
+ * @type {(input: string, position: number) => string}
+ */
+const getCodePoint = String.prototype.codePointAt
+  ? (input, position) => input.codePointAt(position)
+  : (input, position) =>
+      (input.charCodeAt(position) - 0xd800) * 0x400 +
+      input.charCodeAt(position + 1) -
+      0xdc00 +
+      0x10000;
+
+/**
+ * @param {string} macroText
+ * @param {RegExp} macroRegExp
+ * @param {(input: string) => string} macroReplacer
+ * @returns {string}
+ */
+const replaceUsingRegExp = (macroText, macroRegExp, macroReplacer) => {
+  macroRegExp.lastIndex = 0;
+  let replaceMatch = macroRegExp.exec(macroText);
+  let replaceResult;
+  if (replaceMatch) {
+    replaceResult = "";
+    let replaceLastIndex = 0;
+    do {
+      if (replaceLastIndex !== replaceMatch.index) {
+        replaceResult += macroText.substring(
+          replaceLastIndex,
+          replaceMatch.index,
+        );
+      }
+      const replaceInput = replaceMatch[0];
+      replaceResult += macroReplacer(replaceInput);
+      replaceLastIndex = replaceMatch.index + replaceInput.length;
+      // eslint-disable-next-line no-cond-assign
+    } while ((replaceMatch = macroRegExp.exec(macroText)));
+
+    if (replaceLastIndex !== macroText.length) {
+      replaceResult += macroText.substring(replaceLastIndex);
+    }
+  } else {
+    replaceResult = macroText;
+  }
+  return replaceResult;
+};
+
+const references = {
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&apos;",
+  "&": "&amp;",
+};
+
+/**
+ * @param {string} text text
+ * @returns {string}
+ */
+function encode(text) {
+  if (!text) {
+    return "";
+  }
+
+  return replaceUsingRegExp(text, /[<>'"&]/g, (input) => {
+    let result = references[input];
+    if (!result) {
+      const code =
+        input.length > 1 ? getCodePoint(input, 0) : input.charCodeAt(0);
+      result = `&#${code};`;
+    }
+    return result;
+  });
+}
+
+/**
+ * @typedef {Object} StateDefinitions
+ * @property {{[event: string]: { target: string; actions?: Array<string> }}} [on]
+ */
+
+/**
+ * @typedef {Object} Options
+ * @property {{[state: string]: StateDefinitions}} states
+ * @property {object} context;
+ * @property {string} initial
+ */
+
+/**
+ * @typedef {Object} Implementation
+ * @property {{[actionName: string]: (ctx: object, event: any) => object}} actions
+ */
+
+/**
+ * A simplified `createMachine` from `@xstate/fsm` with the following differences:
+ *
+ *  - the returned machine is technically a "service". No `interpret(machine).start()` is needed.
+ *  - the state definition only support `on` and target must be declared with { target: 'nextState', actions: [] } explicitly.
+ *  - event passed to `send` must be an object with `type` property.
+ *  - actions implementation will be [assign action](https://xstate.js.org/docs/guides/context.html#assign-action) if you return any value.
+ *  Do not return anything if you just want to invoke side effect.
+ *
+ * The goal of this custom function is to avoid installing the entire `'xstate/fsm'` package, while enabling modeling using
+ * state machine. You can copy the first parameter into the editor at https://stately.ai/viz to visualize the state machine.
+ *
+ * @param {Options} options
+ * @param {Implementation} implementation
+ */
+function createMachine({ states, context, initial }, { actions }) {
+  let currentState = initial;
+  let currentContext = context;
+
+  return {
+    send: (event) => {
+      const currentStateOn = states[currentState].on;
+      const transitionConfig = currentStateOn && currentStateOn[event.type];
+
+      if (transitionConfig) {
+        currentState = transitionConfig.target;
+        if (transitionConfig.actions) {
+          transitionConfig.actions.forEach((actName) => {
+            const actionImpl = actions[actName];
+
+            const nextContextValue =
+              actionImpl && actionImpl(currentContext, event);
+
+            if (nextContextValue) {
+              currentContext = {
+                ...currentContext,
+                ...nextContextValue,
+              };
+            }
+          });
+        }
+      }
+    },
+  };
+}
+
+/**
+ * @typedef {Object} ShowOverlayData
+ * @property {'warning' | 'error'} level
+ * @property {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
+ * @property {'build' | 'runtime'} messageSource
+ */
+
+/**
+ * @typedef {Object} CreateOverlayMachineOptions
+ * @property {(data: ShowOverlayData) => void} showOverlay
+ * @property {() => void} hideOverlay
+ */
+
+/**
+ * @param {CreateOverlayMachineOptions} options
+ */
+const createOverlayMachine = (options) => {
+  const { hideOverlay, showOverlay } = options;
+
+  return createMachine(
+    {
+      initial: "hidden",
+      context: {
+        level: "error",
+        messages: [],
+        messageSource: "build",
+      },
+      states: {
+        hidden: {
+          on: {
+            BUILD_ERROR: {
+              target: "displayBuildError",
+              actions: ["setMessages", "showOverlay"],
+            },
+            RUNTIME_ERROR: {
+              target: "displayRuntimeError",
+              actions: ["setMessages", "showOverlay"],
+            },
+          },
+        },
+        displayBuildError: {
+          on: {
+            DISMISS: {
+              target: "hidden",
+              actions: ["dismissMessages", "hideOverlay"],
+            },
+            BUILD_ERROR: {
+              target: "displayBuildError",
+              actions: ["appendMessages", "showOverlay"],
+            },
+          },
+        },
+        displayRuntimeError: {
+          on: {
+            DISMISS: {
+              target: "hidden",
+              actions: ["dismissMessages", "hideOverlay"],
+            },
+            RUNTIME_ERROR: {
+              target: "displayRuntimeError",
+              actions: ["appendMessages", "showOverlay"],
+            },
+            BUILD_ERROR: {
+              target: "displayBuildError",
+              actions: ["setMessages", "showOverlay"],
+            },
+          },
+        },
+      },
+    },
+    {
+      actions: {
+        dismissMessages: () => {
+          return {
+            messages: [],
+            level: "error",
+            messageSource: "build",
+          };
+        },
+        appendMessages: (context, event) => {
+          return {
+            messages: context.messages.concat(event.messages),
+            level: event.level || context.level,
+            messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build",
+          };
+        },
+        setMessages: (context, event) => {
+          return {
+            messages: event.messages,
+            level: event.level || context.level,
+            messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build",
+          };
+        },
+        hideOverlay,
+        showOverlay,
+      },
+    },
+  );
+};
+
+/**
+ *
+ * @param {Error} error
+ */
+const parseErrorToStacks = (error) => {
+  if (!error || !(error instanceof Error)) {
+    throw new Error(`parseErrorToStacks expects Error object`);
+  }
+  if (typeof error.stack === "string") {
+    return error.stack
+      .split("\n")
+      .filter((stack) => stack !== `Error: ${error.message}`);
+  }
+};
+
+/**
+ * @callback ErrorCallback
+ * @param {ErrorEvent} error
+ * @returns {void}
+ */
+
+/**
+ * @param {ErrorCallback} callback
+ */
+const listenToRuntimeError = (callback) => {
+  window.addEventListener("error", callback);
+
+  return function cleanup() {
+    window.removeEventListener("error", callback);
+  };
+};
+
+/**
+ * @callback UnhandledRejectionCallback
+ * @param {PromiseRejectionEvent} rejectionEvent
+ * @returns {void}
+ */
+
+/**
+ * @param {UnhandledRejectionCallback} callback
+ */
+const listenToUnhandledRejection = (callback) => {
+  window.addEventListener("unhandledrejection", callback);
+
+  return function cleanup() {
+    window.removeEventListener("unhandledrejection", callback);
+  };
+};
+
+// Styles are inspired by `react-error-overlay`
+
+const msgStyles = {
+  error: {
+    backgroundColor: "rgba(206, 17, 38, 0.1)",
+    color: "#fccfcf",
+  },
+  warning: {
+    backgroundColor: "rgba(251, 245, 180, 0.1)",
+    color: "#fbf5b4",
+  },
+};
+const iframeStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: "100vw",
+  height: "100vh",
+  border: "none",
+  "z-index": 9999999999,
+};
+const containerStyle = {
+  position: "fixed",
+  boxSizing: "border-box",
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  width: "100vw",
+  height: "100vh",
+  fontSize: "large",
+  padding: "2rem 2rem 4rem 2rem",
+  lineHeight: "1.2",
+  whiteSpace: "pre-wrap",
+  overflow: "auto",
+  backgroundColor: "rgba(0, 0, 0, 0.9)",
+  color: "white",
+};
+const headerStyle = {
+  color: "#e83b46",
+  fontSize: "2em",
+  whiteSpace: "pre-wrap",
+  fontFamily: "sans-serif",
+  margin: "0 2rem 2rem 0",
+  flex: "0 0 auto",
+  maxHeight: "50%",
+  overflow: "auto",
+};
+const dismissButtonStyle = {
+  color: "#ffffff",
+  lineHeight: "1rem",
+  fontSize: "1.5rem",
+  padding: "1rem",
+  cursor: "pointer",
+  position: "absolute",
+  right: 0,
+  top: 0,
+  backgroundColor: "transparent",
+  border: "none",
+};
+const msgTypeStyle = {
+  color: "#e83b46",
+  fontSize: "1.2em",
+  marginBottom: "1rem",
+  fontFamily: "sans-serif",
+};
+const msgTextStyle = {
+  lineHeight: "1.5",
+  fontSize: "1rem",
+  fontFamily: "Menlo, Consolas, monospace",
+};
+
+// ANSI HTML
 
 const colors = {
   reset: ["transparent", "transparent"],
@@ -39,7 +385,7 @@ ansiHTML.setColors(colors);
  * @param {string  | { file?: string, moduleName?: string, loc?: string, message?: string; stack?: string[] }} item
  * @returns {{ header: string, body: string }}
  */
-function formatProblem(type, item) {
+const formatProblem = (type, item) => {
   let header = type === "warning" ? "WARNING" : "ERROR";
   let body = "";
 
@@ -74,7 +420,7 @@ function formatProblem(type, item) {
   }
 
   return { header, body };
-}
+};
 
 /**
  * @typedef {Object} CreateOverlayOptions
diff --git a/client-src/overlay/fsm.js b/client-src/overlay/fsm.js
deleted file mode 100644
index 78020e97aa..0000000000
--- a/client-src/overlay/fsm.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * @typedef {Object} StateDefinitions
- * @property {{[event: string]: { target: string; actions?: Array<string> }}} [on]
- */
-
-/**
- * @typedef {Object} Options
- * @property {{[state: string]: StateDefinitions}} states
- * @property {object} context;
- * @property {string} initial
- */
-
-/**
- * @typedef {Object} Implementation
- * @property {{[actionName: string]: (ctx: object, event: any) => object}} actions
- */
-
-/**
- * A simplified `createMachine` from `@xstate/fsm` with the following differences:
- *
- *  - the returned machine is technically a "service". No `interpret(machine).start()` is needed.
- *  - the state definition only support `on` and target must be declared with { target: 'nextState', actions: [] } explicitly.
- *  - event passed to `send` must be an object with `type` property.
- *  - actions implementation will be [assign action](https://xstate.js.org/docs/guides/context.html#assign-action) if you return any value.
- *  Do not return anything if you just want to invoke side effect.
- *
- * The goal of this custom function is to avoid installing the entire `'xstate/fsm'` package, while enabling modeling using
- * state machine. You can copy the first parameter into the editor at https://stately.ai/viz to visualize the state machine.
- *
- * @param {Options} options
- * @param {Implementation} implementation
- */
-function createMachine({ states, context, initial }, { actions }) {
-  let currentState = initial;
-  let currentContext = context;
-
-  return {
-    send: (event) => {
-      const currentStateOn = states[currentState].on;
-      const transitionConfig = currentStateOn && currentStateOn[event.type];
-
-      if (transitionConfig) {
-        currentState = transitionConfig.target;
-        if (transitionConfig.actions) {
-          transitionConfig.actions.forEach((actName) => {
-            const actionImpl = actions[actName];
-
-            const nextContextValue =
-              actionImpl && actionImpl(currentContext, event);
-
-            if (nextContextValue) {
-              currentContext = {
-                ...currentContext,
-                ...nextContextValue,
-              };
-            }
-          });
-        }
-      }
-    },
-  };
-}
-
-export default createMachine;
diff --git a/client-src/overlay/runtime-error.js b/client-src/overlay/runtime-error.js
deleted file mode 100644
index 756afc845f..0000000000
--- a/client-src/overlay/runtime-error.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- *
- * @param {Error} error
- */
-function parseErrorToStacks(error) {
-  if (!error || !(error instanceof Error)) {
-    throw new Error(`parseErrorToStacks expects Error object`);
-  }
-  if (typeof error.stack === "string") {
-    return error.stack
-      .split("\n")
-      .filter((stack) => stack !== `Error: ${error.message}`);
-  }
-}
-
-/**
- * @callback ErrorCallback
- * @param {ErrorEvent} error
- * @returns {void}
- */
-
-/**
- * @param {ErrorCallback} callback
- */
-function listenToRuntimeError(callback) {
-  window.addEventListener("error", callback);
-
-  return function cleanup() {
-    window.removeEventListener("error", callback);
-  };
-}
-
-/**
- * @callback UnhandledRejectionCallback
- * @param {PromiseRejectionEvent} rejectionEvent
- * @returns {void}
- */
-
-/**
- * @param {UnhandledRejectionCallback} callback
- */
-function listenToUnhandledRejection(callback) {
-  window.addEventListener("unhandledrejection", callback);
-
-  return function cleanup() {
-    window.removeEventListener("unhandledrejection", callback);
-  };
-}
-
-export { listenToRuntimeError, listenToUnhandledRejection, parseErrorToStacks };
diff --git a/client-src/overlay/state-machine.js b/client-src/overlay/state-machine.js
deleted file mode 100644
index 4b15c6cd35..0000000000
--- a/client-src/overlay/state-machine.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import createMachine from "./fsm.js";
-
-/**
- * @typedef {Object} ShowOverlayData
- * @property {'warning' | 'error'} level
- * @property {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
- * @property {'build' | 'runtime'} messageSource
- */
-
-/**
- * @typedef {Object} CreateOverlayMachineOptions
- * @property {(data: ShowOverlayData) => void} showOverlay
- * @property {() => void} hideOverlay
- */
-
-/**
- * @param {CreateOverlayMachineOptions} options
- */
-const createOverlayMachine = (options) => {
-  const { hideOverlay, showOverlay } = options;
-  const overlayMachine = createMachine(
-    {
-      initial: "hidden",
-      context: {
-        level: "error",
-        messages: [],
-        messageSource: "build",
-      },
-      states: {
-        hidden: {
-          on: {
-            BUILD_ERROR: {
-              target: "displayBuildError",
-              actions: ["setMessages", "showOverlay"],
-            },
-            RUNTIME_ERROR: {
-              target: "displayRuntimeError",
-              actions: ["setMessages", "showOverlay"],
-            },
-          },
-        },
-        displayBuildError: {
-          on: {
-            DISMISS: {
-              target: "hidden",
-              actions: ["dismissMessages", "hideOverlay"],
-            },
-            BUILD_ERROR: {
-              target: "displayBuildError",
-              actions: ["appendMessages", "showOverlay"],
-            },
-          },
-        },
-        displayRuntimeError: {
-          on: {
-            DISMISS: {
-              target: "hidden",
-              actions: ["dismissMessages", "hideOverlay"],
-            },
-            RUNTIME_ERROR: {
-              target: "displayRuntimeError",
-              actions: ["appendMessages", "showOverlay"],
-            },
-            BUILD_ERROR: {
-              target: "displayBuildError",
-              actions: ["setMessages", "showOverlay"],
-            },
-          },
-        },
-      },
-    },
-    {
-      actions: {
-        dismissMessages: () => {
-          return {
-            messages: [],
-            level: "error",
-            messageSource: "build",
-          };
-        },
-        appendMessages: (context, event) => {
-          return {
-            messages: context.messages.concat(event.messages),
-            level: event.level || context.level,
-            messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build",
-          };
-        },
-        setMessages: (context, event) => {
-          return {
-            messages: event.messages,
-            level: event.level || context.level,
-            messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build",
-          };
-        },
-        hideOverlay,
-        showOverlay,
-      },
-    },
-  );
-
-  return overlayMachine;
-};
-
-export default createOverlayMachine;
diff --git a/client-src/overlay/styles.js b/client-src/overlay/styles.js
deleted file mode 100644
index 4786c1b62e..0000000000
--- a/client-src/overlay/styles.js
+++ /dev/null
@@ -1,89 +0,0 @@
-// styles are inspired by `react-error-overlay`
-
-const msgStyles = {
-  error: {
-    backgroundColor: "rgba(206, 17, 38, 0.1)",
-    color: "#fccfcf",
-  },
-  warning: {
-    backgroundColor: "rgba(251, 245, 180, 0.1)",
-    color: "#fbf5b4",
-  },
-};
-
-const iframeStyle = {
-  position: "fixed",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  width: "100vw",
-  height: "100vh",
-  border: "none",
-  "z-index": 9999999999,
-};
-
-const containerStyle = {
-  position: "fixed",
-  boxSizing: "border-box",
-  left: 0,
-  top: 0,
-  right: 0,
-  bottom: 0,
-  width: "100vw",
-  height: "100vh",
-  fontSize: "large",
-  padding: "2rem 2rem 4rem 2rem",
-  lineHeight: "1.2",
-  whiteSpace: "pre-wrap",
-  overflow: "auto",
-  backgroundColor: "rgba(0, 0, 0, 0.9)",
-  color: "white",
-};
-
-const headerStyle = {
-  color: "#e83b46",
-  fontSize: "2em",
-  whiteSpace: "pre-wrap",
-  fontFamily: "sans-serif",
-  margin: "0 2rem 2rem 0",
-  flex: "0 0 auto",
-  maxHeight: "50%",
-  overflow: "auto",
-};
-
-const dismissButtonStyle = {
-  color: "#ffffff",
-  lineHeight: "1rem",
-  fontSize: "1.5rem",
-  padding: "1rem",
-  cursor: "pointer",
-  position: "absolute",
-  right: 0,
-  top: 0,
-  backgroundColor: "transparent",
-  border: "none",
-};
-
-const msgTypeStyle = {
-  color: "#e83b46",
-  fontSize: "1.2em",
-  marginBottom: "1rem",
-  fontFamily: "sans-serif",
-};
-
-const msgTextStyle = {
-  lineHeight: "1.5",
-  fontSize: "1rem",
-  fontFamily: "Menlo, Consolas, monospace",
-};
-
-export {
-  msgStyles,
-  iframeStyle,
-  containerStyle,
-  headerStyle,
-  dismissButtonStyle,
-  msgTypeStyle,
-  msgTextStyle,
-};
diff --git a/client-src/utils/createSocketURL.js b/client-src/utils/createSocketURL.js
deleted file mode 100644
index 0d049eb7ab..0000000000
--- a/client-src/utils/createSocketURL.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/**
- * @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}`;
-}
-
-/**
- * @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 '[::]'
-  const isInAddrAny =
-    hostname === "0.0.0.0" || hostname === "::" || hostname === "[::]";
-
-  // why do we need this check?
-  // hostname n/a for file protocol (example, when using electron, ionic)
-  // see: https://github.com/webpack/webpack-dev-server/pull/384
-  if (
-    isInAddrAny &&
-    self.location.hostname &&
-    self.location.protocol.indexOf("http") === 0
-  ) {
-    hostname = self.location.hostname;
-  }
-
-  let socketURLProtocol = parsedURL.protocol || self.location.protocol;
-
-  // When https is used in the app, secure web sockets are always necessary because the browser doesn't accept non-secure web sockets.
-  if (
-    socketURLProtocol === "auto:" ||
-    (hostname && isInAddrAny && self.location.protocol === "https:")
-  ) {
-    socketURLProtocol = self.location.protocol;
-  }
-
-  socketURLProtocol = socketURLProtocol.replace(
-    /^(?:http|.+-extension|file)/i,
-    "ws",
-  );
-
-  let socketURLAuth = "";
-
-  // `new URL(urlString, [baseURLstring])` doesn't have `auth` property
-  // Parse authentication credentials in case we need them
-  if (parsedURL.username) {
-    socketURLAuth = parsedURL.username;
-
-    // Since HTTP basic authentication does not allow empty username,
-    // we only include password if the username is not empty.
-    if (parsedURL.password) {
-      // Result: <username>:<password>
-      socketURLAuth = socketURLAuth.concat(":", parsedURL.password);
-    }
-  }
-
-  // In case the host is a raw IPv6 address, it can be enclosed in
-  // the brackets as the brackets are needed in the final URL string.
-  // Need to remove those as url.format blindly adds its own set of brackets
-  // if the host string contains colons. That would lead to non-working
-  // double brackets (e.g. [[::]]) host
-  //
-  // All of these web socket url params are optionally passed in through resourceQuery,
-  // so we need to fall back to the default if they are not provided
-  const socketURLHostname = (
-    hostname ||
-    self.location.hostname ||
-    "localhost"
-  ).replace(/^\[(.*)\]$/, "$1");
-
-  let socketURLPort = parsedURL.port;
-
-  if (!socketURLPort || socketURLPort === "0") {
-    socketURLPort = self.location.port;
-  }
-
-  // If path is provided it'll be passed in via the resourceQuery as a
-  // query param so it has to be parsed out of the querystring in order for the
-  // client to open the socket to the correct location.
-  let socketURLPathname = "/ws";
-
-  if (parsedURL.pathname && !parsedURL.fromCurrentScript) {
-    socketURLPathname = parsedURL.pathname;
-  }
-
-  return format({
-    protocol: socketURLProtocol,
-    auth: socketURLAuth,
-    hostname: socketURLHostname,
-    port: socketURLPort,
-    pathname: socketURLPathname,
-    slashes: true,
-  });
-}
-
-export default createSocketURL;
diff --git a/client-src/utils/getCurrentScriptSource.js b/client-src/utils/getCurrentScriptSource.js
deleted file mode 100644
index 6ada91fea4..0000000000
--- a/client-src/utils/getCurrentScriptSource.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * @returns {string}
- */
-function getCurrentScriptSource() {
-  // `document.currentScript` is the most accurate way to find the current script,
-  // but is not supported in all browsers.
-  if (document.currentScript) {
-    return document.currentScript.getAttribute("src");
-  }
-
-  // Fallback to getting all scripts running in the document.
-  const scriptElements = document.scripts || [];
-  const scriptElementsWithSrc = Array.prototype.filter.call(
-    scriptElements,
-    (element) => element.getAttribute("src"),
-  );
-
-  if (scriptElementsWithSrc.length > 0) {
-    const currentScript =
-      scriptElementsWithSrc[scriptElementsWithSrc.length - 1];
-
-    return currentScript.getAttribute("src");
-  }
-
-  // Fail as there was no script to use.
-  throw new Error("[webpack-dev-server] Failed to get current script source.");
-}
-
-export default getCurrentScriptSource;
diff --git a/client-src/utils/log.js b/client-src/utils/log.js
index a62aee544b..aecf104a17 100644
--- a/client-src/utils/log.js
+++ b/client-src/utils/log.js
@@ -18,23 +18,4 @@ setLogLevel(defaultLevel);
 
 const log = logger.getLogger(name);
 
-const logEnabledFeatures = (features) => {
-  const enabledFeatures = Object.keys(features);
-  if (!features || enabledFeatures.length === 0) {
-    return;
-  }
-
-  let logString = "Server started:";
-
-  // Server started: Hot Module Replacement enabled, Live Reloading enabled, Overlay disabled.
-  for (let i = 0; i < enabledFeatures.length; i++) {
-    const key = enabledFeatures[i];
-    logString += ` ${key} ${features[key] ? "enabled" : "disabled"},`;
-  }
-  // replace last comma with a period
-  logString = logString.slice(0, -1).concat(".");
-
-  log.info(logString);
-};
-
-export { log, logEnabledFeatures, setLogLevel };
+export { log, setLogLevel };
diff --git a/client-src/utils/parseURL.js b/client-src/utils/parseURL.js
deleted file mode 100644
index 9e9b5e4422..0000000000
--- a/client-src/utils/parseURL.js
+++ /dev/null
@@ -1,44 +0,0 @@
-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 !== "") {
-    const searchParams = resourceQuery.slice(1).split("&");
-
-    for (let i = 0; i < searchParams.length; i++) {
-      const pair = searchParams[i].split("=");
-
-      options[pair[0]] = decodeURIComponent(pair[1]);
-    }
-  } else {
-    // Else, get the url from the <script> this file was called with.
-    const scriptSource = getCurrentScriptSource();
-
-    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;
-    }
-  }
-
-  return options;
-}
-
-export default parseURL;
diff --git a/client-src/utils/reloadApp.js b/client-src/utils/reloadApp.js
deleted file mode 100644
index a60051c528..0000000000
--- a/client-src/utils/reloadApp.js
+++ /dev/null
@@ -1,72 +0,0 @@
-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(/** @type {string} */ (previousHash)) >= 0;
-
-  if (isInitial) {
-    return;
-  }
-
-  /**
-   * @param {Window} rootWindow
-   * @param {number} intervalId
-   */
-  function applyReload(rootWindow, intervalId) {
-    clearInterval(intervalId);
-
-    log.info("App updated. Reloading...");
-
-    rootWindow.location.reload();
-  }
-
-  const search = self.location.search.toLowerCase();
-  const allowToHot = search.indexOf("webpack-dev-server-hot=false") === -1;
-  const allowToLiveReload =
-    search.indexOf("webpack-dev-server-live-reload=false") === -1;
-
-  if (hot && allowToHot) {
-    log.info("App hot update...");
-
-    hotEmitter.emit("webpackHotUpdate", status.currentHash);
-
-    if (typeof self !== "undefined" && self.window) {
-      // broadcast update to window
-      self.postMessage(`webpackHotUpdate${status.currentHash}`, "*");
-    }
-  }
-  // allow refreshing the page only if liveReload isn't disabled
-  else if (liveReload && allowToLiveReload) {
-    let rootWindow = self;
-
-    // use parent window for reload (in case we're in an iframe with no valid src)
-    const intervalId = self.setInterval(() => {
-      if (rootWindow.location.protocol !== "about:") {
-        // reload immediately if protocol is valid
-        applyReload(rootWindow, intervalId);
-      } else {
-        rootWindow = rootWindow.parent;
-
-        if (rootWindow.parent === rootWindow) {
-          // if parent equals current window we've reached the root which would continue forever, so trigger a reload anyways
-          applyReload(rootWindow, intervalId);
-        }
-      }
-    });
-  }
-}
-
-export default reloadApp;
diff --git a/client-src/utils/stripAnsi.js b/client-src/utils/stripAnsi.js
deleted file mode 100644
index 140783742f..0000000000
--- a/client-src/utils/stripAnsi.js
+++ /dev/null
@@ -1,26 +0,0 @@
-const ansiRegex = new RegExp(
-  [
-    "[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?\\u0007)",
-    "(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))",
-  ].join("|"),
-  "g",
-);
-
-/**
- *
- * Strip [ANSI escape codes](https://en.wikipedia.org/wiki/ANSI_escape_code) from a string.
- * Adapted from code originally released by Sindre Sorhus
- * Licensed the MIT License
- *
- * @param {string} string
- * @return {string}
- */
-function stripAnsi(string) {
-  if (typeof string !== "string") {
-    throw new TypeError(`Expected a \`string\`, got \`${typeof string}\``);
-  }
-
-  return string.replace(ansiRegex, "");
-}
-
-export default stripAnsi;
diff --git a/client-src/webpack.config.js b/client-src/webpack.config.js
index 3e44675239..333f50a20c 100644
--- a/client-src/webpack.config.js
+++ b/client-src/webpack.config.js
@@ -22,9 +22,6 @@ const baseForModules = {
     path: path.resolve(__dirname, "../client/modules"),
     ...library,
   },
-  optimization: {
-    minimize: false,
-  },
   target: ["web", "es5"],
   module: {
     rules: [
@@ -44,7 +41,6 @@ module.exports = [
   merge(baseForModules, {
     entry: path.join(__dirname, "modules/logger/index.js"),
     output: {
-      // @ts-ignore
       filename: "logger/index.js",
     },
     module: {
@@ -54,7 +50,6 @@ module.exports = [
           use: [
             {
               loader: "babel-loader",
-              // @ts-ignore
               options: {
                 plugins: ["@babel/plugin-transform-object-assign"],
               },
@@ -78,7 +73,6 @@ 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/lib/Server.js b/lib/Server.js
index 22b0a5ebd2..80051e735e 100644
--- a/lib/Server.js
+++ b/lib/Server.js
@@ -404,6 +404,7 @@ class Server {
       let host;
 
       const networks = Object.values(os.networkInterfaces())
+        // eslint-disable-next-line no-shadow
         .flatMap((networks) => networks ?? [])
         .filter((network) => {
           if (!network || !network.address) {
diff --git a/package.json b/package.json
index a7605c28cc..e85e772f46 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,6 @@
     "connect-history-api-fallback": "^2.0.0",
     "express": "^4.21.1",
     "graceful-fs": "^4.2.6",
-    "html-entities": "^2.4.0",
     "http-proxy-middleware": "^2.0.7",
     "ipaddr.js": "^2.1.0",
     "launch-editor": "^2.6.1",
diff --git a/test/client/__snapshots__/index.test.js.snap.webpack5 b/test/client/__snapshots__/index.test.js.snap.webpack5
index 4bbf9b437f..7ec75e7992 100644
--- a/test/client/__snapshots__/index.test.js.snap.webpack5
+++ b/test/client/__snapshots__/index.test.js.snap.webpack5
@@ -16,17 +16,6 @@ exports[`index should run onSocketMessage.error 1`] = `"error!!"`;
 
 exports[`index should run onSocketMessage.ok 1`] = `"Ok"`;
 
-exports[`index should run onSocketMessage.ok 2`] = `
-{
-  "hot": false,
-  "liveReload": false,
-  "logging": "info",
-  "overlay": false,
-  "progress": false,
-  "reconnect": 10,
-}
-`;
-
 exports[`index should run onSocketMessage.progress and onSocketMessage['progress-update'] 1`] = `"Progress"`;
 
 exports[`index should run onSocketMessage.progress and onSocketMessage['progress-update'] 2`] = `"12% - mock-msg."`;
@@ -66,7 +55,7 @@ exports[`index should run onSocketMessage['still-ok'] 2`] = `"StillOk"`;
 
 exports[`index should set arguments into socket function 1`] = `
 [
-  "mock-url",
+  "ws://localhost/ws",
   {
     "close": [Function],
     "error": [Function],
@@ -85,8 +74,6 @@ exports[`index should set arguments into socket function 1`] = `
     "still-ok": [Function],
     "warnings": [Function],
   },
-  10,
+  undefined,
 ]
 `;
-
-exports[`index should update log level if options is passed 1`] = `"info"`;
diff --git a/test/client/index.test.js b/test/client/index.test.js
index 53e7a60889..f45f7bbf77 100644
--- a/test/client/index.test.js
+++ b/test/client/index.test.js
@@ -8,14 +8,13 @@ describe("index", () => {
   let log;
   let socket;
   let overlay;
-  let reloadApp;
   let sendMessage;
   let onSocketMessage;
   const locationValue = self.location;
   const resourceQueryValue = global.__resourceQuery;
 
   beforeEach(() => {
-    global.__resourceQuery = "foo";
+    global.__resourceQuery = "?mock-url";
     global.__webpack_hash__ = "mock-hash";
 
     // log
@@ -51,25 +50,10 @@ describe("index", () => {
     const { createOverlay } = require("../../client-src/overlay");
     overlay = createOverlay();
 
-    // reloadApp
-    jest.setMock("../../client-src/utils/reloadApp.js", jest.fn());
-    reloadApp = require("../../client-src/utils/reloadApp");
-
     // sendMessage
     jest.setMock("../../client-src/utils/sendMessage.js", jest.fn());
     sendMessage = require("../../client-src/utils/sendMessage");
 
-    // getUrlOptions
-    jest.setMock("../../client-src/utils/parseURL.js", () => {
-      return {
-        logging: "info",
-        reconnect: 10,
-      };
-    });
-
-    // createSocketUrl
-    jest.setMock("../../client-src/utils/createSocketURL.js", () => "mock-url");
-
     // issue: https://github.com/jsdom/jsdom/issues/2112
     delete window.location;
 
@@ -93,7 +77,7 @@ describe("index", () => {
   test("should run onSocketMessage['still-ok']", () => {
     onSocketMessage["still-ok"]();
 
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
     expect(overlay.send).not.toBeCalledWith({ type: "DISMISS" });
 
@@ -111,7 +95,6 @@ describe("index", () => {
       percent: "12",
     });
 
-    expect(log.log.info).not.toBeCalled();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
 
     onSocketMessage.progress(true);
@@ -120,7 +103,7 @@ describe("index", () => {
       percent: "12",
     });
 
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
   });
 
   test("should run onSocketMessage.progress and onSocketMessage['progress-update'] and log plugin name", () => {
@@ -131,7 +114,6 @@ describe("index", () => {
       pluginName: "mock-plugin",
     });
 
-    expect(log.log.info).not.toBeCalled();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
 
     onSocketMessage.progress(true);
@@ -141,7 +123,7 @@ describe("index", () => {
       pluginName: "mock-plugin",
     });
 
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
   });
 
   test("should run onSocketMessage.ok", () => {
@@ -154,8 +136,6 @@ describe("index", () => {
 
     const res = onSocketMessage.ok();
 
-    expect(reloadApp).toBeCalled();
-    expect(reloadApp.mock.calls[0][0]).toMatchSnapshot();
     // eslint-disable-next-line no-undefined
     expect(res).toEqual(undefined);
   });
@@ -163,14 +143,14 @@ describe("index", () => {
   test("should run onSocketMessage['static-changed']", () => {
     onSocketMessage["static-changed"]();
 
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
     expect(self.location.reload).toBeCalled();
   });
 
   test("should run onSocketMessage['static-changed'](file)", () => {
     onSocketMessage["static-changed"]("/static/assets/index.html");
 
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
     expect(self.location.reload).toBeCalled();
   });
 
@@ -201,7 +181,6 @@ describe("index", () => {
       )}`;
       overlay.send.mockReset();
       socket.mockReset();
-      jest.unmock("../../client-src/utils/parseURL.js");
       require("../../client-src");
       onSocketMessage = socket.mock.calls[0][1];
 
@@ -224,7 +203,6 @@ describe("index", () => {
       )}`;
       overlay.send.mockReset();
       socket.mockReset();
-      jest.unmock("../../client-src/utils/parseURL.js");
       require("../../client-src");
       onSocketMessage = socket.mock.calls[0][1];
 
@@ -243,7 +221,6 @@ describe("index", () => {
     jest.isolateModules(() => {
       // Use simple boolean
       global.__resourceQuery = "?overlay=true";
-      jest.unmock("../../client-src/utils/parseURL.js");
       socket.mockReset();
       overlay.send.mockReset();
       require("../../client-src");
@@ -276,7 +253,7 @@ describe("index", () => {
   test("should run onSocketMessage.close", () => {
     onSocketMessage.close();
 
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
   });
 
@@ -285,7 +262,7 @@ describe("index", () => {
     onSocketMessage.hot();
     onSocketMessage.close();
 
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
   });
 
@@ -294,11 +271,7 @@ describe("index", () => {
     onSocketMessage.liveReload();
     onSocketMessage.close();
 
-    expect(log.log.info.mock.calls[0][0]).toMatchSnapshot();
+    expect(log.log.info.mock.calls[1][0]).toMatchSnapshot();
     expect(sendMessage.mock.calls[0][0]).toMatchSnapshot();
   });
-
-  test("should update log level if options is passed", () => {
-    expect(log.setLogLevel.mock.calls[0][0]).toMatchSnapshot();
-  });
 });
diff --git a/test/client/utils/createSocketURL.test.js b/test/client/utils/createSocketURL.test.js
index f6201d7aa3..4fbc4ec940 100644
--- a/test/client/utils/createSocketURL.test.js
+++ b/test/client/utils/createSocketURL.test.js
@@ -5,8 +5,10 @@
 "use strict";
 
 describe("'createSocketURL' function ", () => {
+  global.__webpack_hash__ = "hash";
+
   const samples = [
-    // __resourceQuery, location and socket URL
+    // // __resourceQuery, location and socket URL
     [
       "?hostname=example.com&pathname=/ws",
       "http://example.com",
@@ -103,16 +105,20 @@ describe("'createSocketURL' function ", () => {
   ];
 
   samples.forEach(([__resourceQuery, location, expected]) => {
-    jest.doMock(
-      "../../../client-src/utils/getCurrentScriptSource",
-      () => () => new URL("./entry.js", location).toString(),
-    );
+    test(`should return '${expected}' socket URL when '__resourceQuery' is '${__resourceQuery}' and 'self.location' is '${location}'`, () => {
+      global.__resourceQuery = __resourceQuery;
 
-    const createSocketURL =
-      require("../../../client-src/utils/createSocketURL").default;
-    const parseURL = require("../../../client-src/utils/parseURL").default;
+      if (__resourceQuery === null) {
+        Object.defineProperty(document, "currentScript", {
+          value: document.createElement("script"),
+          configurable: true,
+        });
+      }
+
+      const client = require("../../../client-src/index");
+      const createSocketURL = client.createSocketURL;
+      const parseURL = client.parseURL;
 
-    test(`should return '${expected}' socket URL when '__resourceQuery' is '${__resourceQuery}' and 'self.location' is '${location}'`, () => {
       const selfLocation = new URL(location);
 
       delete window.location;
@@ -121,6 +127,13 @@ describe("'createSocketURL' function ", () => {
 
       const parsedURL = parseURL(__resourceQuery);
 
+      if (__resourceQuery === null) {
+        Object.defineProperty(document, "currentScript", {
+          value: null,
+          configurable: true,
+        });
+      }
+
       expect(createSocketURL(parsedURL)).toBe(expected);
     });
 
diff --git a/test/client/utils/getCurrentScriptSource.test.js b/test/client/utils/getCurrentScriptSource.test.js
index 788c8ff214..fc51e9fc46 100644
--- a/test/client/utils/getCurrentScriptSource.test.js
+++ b/test/client/utils/getCurrentScriptSource.test.js
@@ -4,10 +4,17 @@
 
 "use strict";
 
-const getCurrentScriptSource =
-  require("../../../client-src/utils/getCurrentScriptSource").default;
-
 describe("'getCurrentScriptSource' function", () => {
+  let getCurrentScriptSource;
+
+  beforeEach(() => {
+    global.__webpack_hash__ = "mock-hash";
+    global.__resourceQuery = "?protocol=ws&hostname=0.0.0.0";
+
+    getCurrentScriptSource =
+      require("../../../client-src/index").getCurrentScriptSource;
+  });
+
   afterEach(() => {
     Object.defineProperty(document, "currentScript", {
       // eslint-disable-next-line no-undefined
diff --git a/test/client/utils/reloadApp.test.js b/test/client/utils/reloadApp.test.js
deleted file mode 100644
index 2f3ce7858c..0000000000
--- a/test/client/utils/reloadApp.test.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-"use strict";
-
-describe("'reloadApp' function", () => {
-  let reloadApp;
-  let log;
-  let locationValue;
-
-  beforeEach(() => {
-    global.__webpack_hash__ = "mock-hash";
-
-    locationValue = self.location;
-
-    self.postMessage = jest.fn();
-
-    Object.defineProperty(window, "location", {
-      value: { reload: jest.fn(), search: "" },
-    });
-
-    jest.mock("webpack/lib/logging/runtime");
-    jest.mock("webpack/hot/emitter.js");
-
-    log = require("webpack/lib/logging/runtime");
-    log.getLogger.mockImplementation(() => {
-      return {
-        info: jest.fn(),
-      };
-    });
-
-    reloadApp = require("../../../client-src/utils/reloadApp").default;
-  });
-
-  afterEach(() => {
-    Object.assign(self, locationValue);
-    jest.resetAllMocks();
-    jest.resetModules();
-  });
-
-  test("should do nothing when isUnloading is true or hotReload is false", () => {
-    expect(
-      reloadApp({}, { isUnloading: false, currentHash: "mock-hash" }),
-    ).toEqual(
-      // eslint-disable-next-line no-undefined
-      undefined,
-    );
-    expect(log.getLogger.mock.results[0].value.info).not.toBeCalled();
-    expect(
-      reloadApp(
-        { hotReload: false },
-        { isUnloading: false, currentHash: "other-mock-hash" },
-      ),
-    ).toEqual(
-      // eslint-disable-next-line no-undefined
-      undefined,
-    );
-    expect(log.getLogger.mock.results[0].value.info).not.toBeCalled();
-  });
-
-  test("should run hot", () => {
-    const emitter = require("webpack/hot/emitter");
-
-    emitter.emit = jest.fn();
-
-    reloadApp(
-      { hot: true, hotReload: true },
-      { isUnloading: false, currentHash: "hash" },
-    );
-
-    expect(
-      log.getLogger.mock.results[0].value.info.mock.calls[0][0],
-    ).toMatchSnapshot();
-    expect(emitter.emit.mock.calls[0][0]).toMatchSnapshot();
-    expect(self.postMessage.mock.calls[0]).toMatchSnapshot();
-  });
-
-  test("should run liveReload when protocol is about:", (done) => {
-    Object.defineProperty(self, "location", {
-      value: {
-        ...self.location,
-        protocol: "about:",
-      },
-    });
-
-    reloadApp(
-      { hot: false, hotReload: true, liveReload: true },
-      { isUnloading: false, currentHash: "changed-mock" },
-    );
-
-    setTimeout(() => {
-      expect(
-        log.getLogger.mock.results[0].value.info.mock.calls[0][0],
-      ).toMatchSnapshot();
-      expect(self.location.reload).toBeCalled();
-      done();
-    });
-  });
-
-  test("should run liveReload when protocol is http:", (done) => {
-    reloadApp(
-      { hot: false, hotReload: true, liveReload: true },
-      { isUnloading: false, currentHash: "changed-mock" },
-    );
-
-    setTimeout(() => {
-      expect(
-        log.getLogger.mock.results[0].value.info.mock.calls[0][0],
-      ).toMatchSnapshot();
-      expect(self.location.reload).toBeCalled();
-      done();
-    });
-  });
-});