diff --git a/.eslintrc.js b/.eslintrc.js
index 046d37acb2..d84245ed41 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -24,9 +24,20 @@ module.exports = {
   overrides: [
     {
       files: ["client-src/**/*.js"],
+      excludedFiles: [
+        "client-src/webpack.config.js",
+        "client-src/modules/logger/SyncBailHookFake.js",
+      ],
+      parserOptions: {
+        sourceType: "module",
+        allowImportExportEverywhere: true,
+      },
       env: {
         browser: true,
       },
+      rules: {
+        "import/extensions": ["error", "always"],
+      },
     },
     {
       files: ["test/**/*.js"],
diff --git a/babel.config.js b/babel.config.js
index fa4dceeb7c..77e5958779 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -8,7 +8,9 @@ module.exports = (api) => {
       [
         "@babel/preset-env",
         {
+          modules: false,
           targets: {
+            esmodules: true,
             node: "0.12",
           },
         },
@@ -17,6 +19,16 @@ module.exports = (api) => {
     plugins: ["@babel/plugin-transform-object-assign"],
     env: {
       test: {
+        presets: [
+          [
+            "@babel/preset-env",
+            {
+              targets: {
+                node: "12.13.0",
+              },
+            },
+          ],
+        ],
         plugins: ["@babel/plugin-transform-runtime"],
       },
     },
diff --git a/client-src/clients/SockJSClient.js b/client-src/clients/SockJSClient.js
index fbeb949829..02a96409b2 100644
--- a/client-src/clients/SockJSClient.js
+++ b/client-src/clients/SockJSClient.js
@@ -1,9 +1,7 @@
-"use strict";
+import SockJS from "../modules/sockjs-client/index.js";
+import { log } from "../utils/log.js";
 
-const SockJS = require("../modules/sockjs-client");
-const { log } = require("../utils/log");
-
-module.exports = class SockJSClient {
+export default class SockJSClient {
   constructor(url) {
     // SockJS requires `http` and `https` protocols
     this.sock = new SockJS(
@@ -28,4 +26,4 @@ module.exports = class SockJSClient {
       f(e.data);
     };
   }
-};
+}
diff --git a/client-src/clients/WebsocketClient.js b/client-src/clients/WebSocketClient.js
similarity index 78%
rename from client-src/clients/WebsocketClient.js
rename to client-src/clients/WebSocketClient.js
index a6dc56bbc2..269a98f6f1 100644
--- a/client-src/clients/WebsocketClient.js
+++ b/client-src/clients/WebSocketClient.js
@@ -1,8 +1,6 @@
-"use strict";
+import { log } from "../utils/log.js";
 
-const { log } = require("../utils/log");
-
-module.exports = class WebsocketClient {
+export default class WebSocketClient {
   constructor(url) {
     this.client = new WebSocket(url);
     this.client.onerror = (error) => {
@@ -24,4 +22,4 @@ module.exports = class WebsocketClient {
       f(e.data);
     };
   }
-};
+}
diff --git a/client-src/index.js b/client-src/index.js
index 037905c43c..a7dff9a5b0 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -1,16 +1,14 @@
-"use strict";
-
-/* global __resourceQuery WorkerGlobalScope */
-
-const webpackHotLog = require("webpack/hot/log");
-const stripAnsi = require("./modules/strip-ansi");
-const parseURL = require("./utils/parseURL");
-const socket = require("./socket");
-const overlay = require("./overlay");
-const { log, setLogLevel } = require("./utils/log");
-const sendMessage = require("./utils/sendMessage");
-const reloadApp = require("./utils/reloadApp");
-const createSocketURL = require("./utils/createSocketURL");
+/* global __resourceQuery */
+
+import webpackHotLog from "webpack/hot/log.js";
+import stripAnsi from "./modules/strip-ansi/index.js";
+import parseURL from "./utils/parseURL.js";
+import socket from "./socket.js";
+import { show, hide } from "./overlay.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";
 
 const status = { isUnloading: false, currentHash: "" };
 const options = {
@@ -66,7 +64,7 @@ const onSocketMessage = {
 
     // Fixes #1042. overlay doesn't clear if errors are fixed but warnings remain.
     if (options.overlay) {
-      overlay.hide();
+      hide();
     }
 
     sendMessage("Invalid");
@@ -100,7 +98,7 @@ const onSocketMessage = {
     log.info("Nothing changed.");
 
     if (options.overlay) {
-      overlay.hide();
+      hide();
     }
 
     sendMessage("StillOk");
@@ -109,7 +107,7 @@ const onSocketMessage = {
     sendMessage("Ok");
 
     if (options.overlay) {
-      overlay.hide();
+      hide();
     }
 
     if (options.initial) {
@@ -156,7 +154,7 @@ const onSocketMessage = {
         : options.overlay && options.overlay.warnings;
 
     if (needShowOverlay) {
-      overlay.show(warnings, "warnings");
+      show(warnings, "warnings");
     }
 
     if (options.initial) {
@@ -184,7 +182,7 @@ const onSocketMessage = {
         : options.overlay && options.overlay.errors;
 
     if (needShowOverlay) {
-      overlay.show(errors, "errors");
+      show(errors, "errors");
     }
 
     options.initial = false;
diff --git a/client-src/modules/logger/index.js b/client-src/modules/logger/index.js
index 8e484b53b0..5b07708739 100644
--- a/client-src/modules/logger/index.js
+++ b/client-src/modules/logger/index.js
@@ -1,3 +1 @@
-"use strict";
-
-module.exports = require("webpack/lib/logging/runtime");
+export { default } from "webpack/lib/logging/runtime.js";
diff --git a/client-src/modules/sockjs-client/index.js b/client-src/modules/sockjs-client/index.js
index c36b6e878c..36783ebda3 100644
--- a/client-src/modules/sockjs-client/index.js
+++ b/client-src/modules/sockjs-client/index.js
@@ -1,4 +1,2 @@
-"use strict";
-
 // eslint-disable-next-line import/no-extraneous-dependencies
-module.exports = require("sockjs-client");
+export { default } from "sockjs-client";
diff --git a/client-src/modules/strip-ansi/index.js b/client-src/modules/strip-ansi/index.js
index 66c0f03433..011c0e0053 100644
--- a/client-src/modules/strip-ansi/index.js
+++ b/client-src/modules/strip-ansi/index.js
@@ -1,3 +1,3 @@
-"use strict";
+import stripAnsi from "strip-ansi";
 
-module.exports = require("strip-ansi").default;
+export default stripAnsi;
diff --git a/client-src/overlay.js b/client-src/overlay.js
index 10e3e66433..50bf19026e 100644
--- a/client-src/overlay.js
+++ b/client-src/overlay.js
@@ -1,5 +1,3 @@
-"use strict";
-
 // The error overlay is inspired (and mostly copied) from Create React App (https://github.com/facebookincubator/create-react-app)
 // They, in turn, got inspired by webpack-hot-middleware (https://github.com/glenjamin/webpack-hot-middleware).
 
@@ -154,4 +152,4 @@ function show(messages, type) {
   });
 }
 
-module.exports = { show, hide };
+export { show, hide };
diff --git a/client-src/socket.js b/client-src/socket.js
index f30c731bc1..9268d68a2f 100644
--- a/client-src/socket.js
+++ b/client-src/socket.js
@@ -1,16 +1,18 @@
-"use strict";
-
 /* global __webpack_dev_server_client__ */
-/* eslint-disable
-  camelcase
-*/
+
+import WebSocketClient from "./clients/WebSocketClient.js";
 
 // this WebsocketClient is here as a default fallback, in case the client is not injected
+/* eslint-disable camelcase */
 const Client =
+  // eslint-disable-next-line camelcase, no-nested-ternary
   typeof __webpack_dev_server_client__ !== "undefined"
-    ? __webpack_dev_server_client__
-    : // eslint-disable-next-line import/no-unresolved
-      require("./clients/WebsocketClient");
+    ? // eslint-disable-next-line camelcase
+      typeof __webpack_dev_server_client__.default !== "undefined"
+      ? __webpack_dev_server_client__.default
+      : __webpack_dev_server_client__
+    : WebSocketClient;
+/* eslint-enable camelcase */
 
 let retries = 0;
 let client = null;
@@ -54,4 +56,4 @@ const socket = function initSocket(url, handlers) {
   });
 };
 
-module.exports = socket;
+export default socket;
diff --git a/client-src/utils/createSocketURL.js b/client-src/utils/createSocketURL.js
index 8963fd1984..b49ae98b78 100644
--- a/client-src/utils/createSocketURL.js
+++ b/client-src/utils/createSocketURL.js
@@ -1,6 +1,4 @@
-"use strict";
-
-const url = require("url");
+import url from "url";
 
 // 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
@@ -92,4 +90,4 @@ function createSocketURL(parsedURL) {
   });
 }
 
-module.exports = createSocketURL;
+export default createSocketURL;
diff --git a/client-src/utils/getCurrentScriptSource.js b/client-src/utils/getCurrentScriptSource.js
index 7f01dd18ff..01b05cb66d 100644
--- a/client-src/utils/getCurrentScriptSource.js
+++ b/client-src/utils/getCurrentScriptSource.js
@@ -1,5 +1,3 @@
-"use strict";
-
 function getCurrentScriptSource() {
   // `document.currentScript` is the most accurate way to find the current script,
   // but is not supported in all browsers.
@@ -25,4 +23,4 @@ function getCurrentScriptSource() {
   throw new Error("[webpack-dev-server] Failed to get current script source.");
 }
 
-module.exports = getCurrentScriptSource;
+export default getCurrentScriptSource;
diff --git a/client-src/utils/log.js b/client-src/utils/log.js
index 260e67fa75..6bf930f1e0 100644
--- a/client-src/utils/log.js
+++ b/client-src/utils/log.js
@@ -1,6 +1,4 @@
-"use strict";
-
-const logger = require("../modules/logger");
+import logger from "../modules/logger/index.js";
 
 const name = "webpack-dev-server";
 // default level is set on the client side, so it does not need
@@ -13,4 +11,6 @@ function setLogLevel(level) {
 
 setLogLevel(defaultLevel);
 
-module.exports = { log: logger.getLogger(name), setLogLevel };
+const log = logger.getLogger(name);
+
+export { log, setLogLevel };
diff --git a/client-src/utils/parseURL.js b/client-src/utils/parseURL.js
index 45000a3de0..9be4077d25 100644
--- a/client-src/utils/parseURL.js
+++ b/client-src/utils/parseURL.js
@@ -1,7 +1,5 @@
-"use strict";
-
-const url = require("url");
-const getCurrentScriptSource = require("./getCurrentScriptSource");
+import url from "url";
+import getCurrentScriptSource from "./getCurrentScriptSource.js";
 
 function parseURL(resourceQuery) {
   let options = {};
@@ -44,4 +42,4 @@ function parseURL(resourceQuery) {
   return options;
 }
 
-module.exports = parseURL;
+export default parseURL;
diff --git a/client-src/utils/reloadApp.js b/client-src/utils/reloadApp.js
index 6151f9cf3c..153093f29b 100644
--- a/client-src/utils/reloadApp.js
+++ b/client-src/utils/reloadApp.js
@@ -1,6 +1,5 @@
-"use strict";
-
-const { log } = require("./log");
+import hotEmitter from "webpack/hot/emitter.js";
+import { log } from "./log.js";
 
 function reloadApp({ hot, liveReload }, { isUnloading, currentHash }) {
   if (isUnloading) {
@@ -23,8 +22,6 @@ function reloadApp({ hot, liveReload }, { isUnloading, currentHash }) {
   if (hot && allowToHot) {
     log.info("App hot update...");
 
-    const hotEmitter = require("webpack/hot/emitter");
-
     hotEmitter.emit("webpackHotUpdate", currentHash);
 
     if (typeof self !== "undefined" && self.window) {
@@ -53,4 +50,4 @@ function reloadApp({ hot, liveReload }, { isUnloading, currentHash }) {
   }
 }
 
-module.exports = reloadApp;
+export default reloadApp;
diff --git a/client-src/utils/sendMessage.js b/client-src/utils/sendMessage.js
index 62f75a310e..48378d167a 100644
--- a/client-src/utils/sendMessage.js
+++ b/client-src/utils/sendMessage.js
@@ -1,5 +1,3 @@
-"use strict";
-
 /* global __resourceQuery WorkerGlobalScope */
 
 // Send messages to the outside, so plugins can consume it.
@@ -13,4 +11,4 @@ function sendMsg(type, data) {
   }
 }
 
-module.exports = sendMsg;
+export default sendMsg;
diff --git a/client-src/webpack.config.js b/client-src/webpack.config.js
index a2eaad25fc..ad6dfc44af 100644
--- a/client-src/webpack.config.js
+++ b/client-src/webpack.config.js
@@ -4,12 +4,28 @@ const path = require("path");
 const webpack = require("webpack");
 const { merge } = require("webpack-merge");
 
+const library = webpack.webpack
+  ? {
+      library: {
+        // type: "module",
+        type: "commonjs",
+      },
+    }
+  : { libraryTarget: "umd" };
+
 const baseForModules = {
   devtool: false,
   mode: "development",
+  // TODO enable this in future after fix bug with `eval` in webpack
+  // experiments: {
+  //   outputModule: true,
+  // },
   output: {
     path: path.resolve(__dirname, "../client/modules"),
-    libraryTarget: "commonjs2",
+    ...library,
+  },
+  optimization: {
+    minimize: false,
   },
   target: webpack.webpack ? ["web", "es5"] : "web",
   module: {
diff --git a/lib/utils/DevServerPlugin.js b/lib/utils/DevServerPlugin.js
index 146dcb98fd..cd318dd9e6 100644
--- a/lib/utils/DevServerPlugin.js
+++ b/lib/utils/DevServerPlugin.js
@@ -46,7 +46,7 @@ class DevServerPlugin {
           );
         } else if (clientTransport === "ws") {
           ClientImplementation = require.resolve(
-            "../../client/clients/WebsocketClient"
+            "../../client/clients/WebSocketClient"
           );
         } else {
           try {
diff --git a/package.json b/package.json
index 34d078e8ad..d123077dc6 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "test": "npm run test:coverage",
     "pretest": "npm run lint",
     "prepare": "npm run build:client && husky install",
-    "build:client": "rimraf ./client/* && babel client-src/ --out-dir client/ --ignore \"webpack.config.js\" && webpack --config client/webpack.config.js",
+    "build:client": "rimraf ./client/* && babel client-src/ --out-dir client/ --ignore \"client-src/webpack.config.js\" --ignore \"client-src/modules\" && webpack --config client-src/webpack.config.js",
     "release": "standard-version"
   },
   "dependencies": {
diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack4 b/test/__snapshots__/validate-options.test.js.snap.webpack4
index 9065f5b7a3..3954a9a654 100644
--- a/test/__snapshots__/validate-options.test.js.snap.webpack4
+++ b/test/__snapshots__/validate-options.test.js.snap.webpack4
@@ -520,7 +520,7 @@ exports[`options validate should throw an error on the "port" option with 'null'
     * options.port should be \\"auto\\"."
 `;
 
-exports[`options validate should throw an error on the "proxy" option with 'false' value 1`] = `
+exports[`options validate should throw an error on the "proxy" option with '() => {}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.proxy should be one of these:
    object { … } | [object { … } | function, ...]
@@ -533,7 +533,7 @@ exports[`options validate should throw an error on the "proxy" option with 'fals
       [object { … } | function, ...]"
 `;
 
-exports[`options validate should throw an error on the "proxy" option with 'function () {}' value 1`] = `
+exports[`options validate should throw an error on the "proxy" option with 'false' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.proxy should be one of these:
    object { … } | [object { … } | function, ...]
diff --git a/test/__snapshots__/validate-options.test.js.snap.webpack5 b/test/__snapshots__/validate-options.test.js.snap.webpack5
index 9065f5b7a3..3954a9a654 100644
--- a/test/__snapshots__/validate-options.test.js.snap.webpack5
+++ b/test/__snapshots__/validate-options.test.js.snap.webpack5
@@ -520,7 +520,7 @@ exports[`options validate should throw an error on the "port" option with 'null'
     * options.port should be \\"auto\\"."
 `;
 
-exports[`options validate should throw an error on the "proxy" option with 'false' value 1`] = `
+exports[`options validate should throw an error on the "proxy" option with '() => {}' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.proxy should be one of these:
    object { … } | [object { … } | function, ...]
@@ -533,7 +533,7 @@ exports[`options validate should throw an error on the "proxy" option with 'fals
       [object { … } | function, ...]"
 `;
 
-exports[`options validate should throw an error on the "proxy" option with 'function () {}' value 1`] = `
+exports[`options validate should throw an error on the "proxy" option with 'false' value 1`] = `
 "ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
  - options.proxy should be one of these:
    object { … } | [object { … } | function, ...]
diff --git a/test/client/clients/SockJSClient.test.js b/test/client/clients/SockJSClient.test.js
index 1b767b7749..363c84ab06 100644
--- a/test/client/clients/SockJSClient.test.js
+++ b/test/client/clients/SockJSClient.test.js
@@ -16,7 +16,8 @@ jest.setMock("../../../client-src/utils/log", {
 });
 
 describe("SockJSClient", () => {
-  const SockJSClient = require("../../../client-src/clients/SockJSClient");
+  const SockJSClient =
+    require("../../../client-src/clients/SockJSClient").default;
   const { log } = require("../../../client-src/utils/log");
   let consoleMock;
   let socketServer;
diff --git a/test/client/clients/WebsocketClient.test.js b/test/client/clients/WebsocketClient.test.js
index f9cb5d5988..c0752579d1 100644
--- a/test/client/clients/WebsocketClient.test.js
+++ b/test/client/clients/WebsocketClient.test.js
@@ -16,7 +16,8 @@ jest.setMock("../../../client-src/utils/log", {
 });
 
 describe("WebsocketClient", () => {
-  const WebsocketClient = require("../../../client-src/clients/WebsocketClient");
+  const WebSocketClient =
+    require("../../../client-src/clients/WebSocketClient").default;
   const { log } = require("../../../client-src/utils/log");
 
   let socketServer;
@@ -46,7 +47,7 @@ describe("WebsocketClient", () => {
         }, 1000);
       });
 
-      const client = new WebsocketClient(`ws://localhost:${port}/ws-server`);
+      const client = new WebSocketClient(`ws://localhost:${port}/ws-server`);
       const data = [];
 
       client.onOpen(() => {
diff --git a/test/client/index.test.js b/test/client/index.test.js
index f8837b1edd..8e5ebf2ff3 100644
--- a/test/client/index.test.js
+++ b/test/client/index.test.js
@@ -26,9 +26,7 @@ describe("index", () => {
       },
       setLogLevel: jest.fn(),
     });
-    jest.setMock("strip-ansi", {
-      default: require("strip-ansi-v6"),
-    });
+    jest.setMock("strip-ansi", require("strip-ansi-v6"));
 
     log = require("../../client-src/utils/log");
 
diff --git a/test/client/socket-helper.test.js b/test/client/socket-helper.test.js
index 66a4c9d9f7..6f6e1f9d5f 100644
--- a/test/client/socket-helper.test.js
+++ b/test/client/socket-helper.test.js
@@ -11,9 +11,11 @@ describe("socket", () => {
   });
 
   it("should default to WebsocketClient when no __webpack_dev_server_client__ set", () => {
-    jest.mock("../../client/clients/WebsocketClient");
-    const socket = require("../../client/socket");
-    const WebsocketClient = require("../../client/clients/WebsocketClient");
+    jest.mock("../../client/clients/WebSocketClient");
+
+    const socket = require("../../client/socket").default;
+    const WebsocketClient =
+      require("../../client/clients/WebSocketClient").default;
 
     const mockHandler = jest.fn();
 
@@ -40,11 +42,15 @@ describe("socket", () => {
   });
 
   it("should use __webpack_dev_server_client__ when set", () => {
-    jest.mock("../../client/clients/WebsocketClient");
-    const socket = require("../../client/socket");
-    global.__webpack_dev_server_client__ = require("../../client/clients/WebsocketClient");
+    jest.mock("../../client/clients/WebSocketClient");
+
+    const socket = require("../../client/socket").default;
+
+    global.__webpack_dev_server_client__ =
+      require("../../client/clients/WebSocketClient").default;
 
     const mockHandler = jest.fn();
+
     socket("my.url", {
       example: mockHandler,
     });
diff --git a/test/client/utils/createSocketURL.test.js b/test/client/utils/createSocketURL.test.js
index 33bd7b2d5b..01e2feadb3 100644
--- a/test/client/utils/createSocketURL.test.js
+++ b/test/client/utils/createSocketURL.test.js
@@ -108,8 +108,9 @@ describe("'createSocketURL' function ", () => {
       () => () => new URL("./entry.js", location).toString()
     );
 
-    const createSocketURL = require("../../../client-src/utils/createSocketURL");
-    const parseURL = require("../../../client-src/utils/parseURL");
+    const createSocketURL =
+      require("../../../client-src/utils/createSocketURL").default;
+    const parseURL = require("../../../client-src/utils/parseURL").default;
 
     test(`should return '${expected}' socket URL when '__resourceQuery' is '${__resourceQuery}' and 'self.location' is '${location}'`, () => {
       const selfLocation = new URL(location);
diff --git a/test/client/utils/getCurrentScriptSource.test.js b/test/client/utils/getCurrentScriptSource.test.js
index a341d1b566..788c8ff214 100644
--- a/test/client/utils/getCurrentScriptSource.test.js
+++ b/test/client/utils/getCurrentScriptSource.test.js
@@ -4,7 +4,8 @@
 
 "use strict";
 
-const getCurrentScriptSource = require("../../../client-src/utils/getCurrentScriptSource");
+const getCurrentScriptSource =
+  require("../../../client-src/utils/getCurrentScriptSource").default;
 
 describe("'getCurrentScriptSource' function", () => {
   afterEach(() => {
diff --git a/test/client/utils/reloadApp.test.js b/test/client/utils/reloadApp.test.js
index dc1e433d44..7819d9cd4a 100644
--- a/test/client/utils/reloadApp.test.js
+++ b/test/client/utils/reloadApp.test.js
@@ -19,6 +19,7 @@ describe("'reloadApp' function", () => {
     });
 
     jest.mock("webpack/lib/logging/runtime");
+    jest.mock("webpack/hot/emitter.js");
 
     log = require("webpack/lib/logging/runtime");
     log.getLogger.mockImplementation(() => {
@@ -27,7 +28,7 @@ describe("'reloadApp' function", () => {
       };
     });
 
-    reloadApp = require("../../../client-src/utils/reloadApp");
+    reloadApp = require("../../../client-src/utils/reloadApp").default;
   });
 
   afterEach(() => {
@@ -48,8 +49,8 @@ describe("'reloadApp' function", () => {
   });
 
   test("should run hot", () => {
-    jest.mock("webpack/hot/emitter");
     const emitter = require("webpack/hot/emitter");
+
     emitter.emit = jest.fn();
 
     reloadApp(
diff --git a/test/client/utils/sendMessage.test.js b/test/client/utils/sendMessage.test.js
index e4aec761ed..6782d6fc38 100644
--- a/test/client/utils/sendMessage.test.js
+++ b/test/client/utils/sendMessage.test.js
@@ -4,7 +4,7 @@
 
 "use strict";
 
-const sendMessage = require("../../../client-src/utils/sendMessage");
+const sendMessage = require("../../../client-src/utils/sendMessage").default;
 
 describe("'sendMessage' function", () => {
   afterEach(() => {
diff --git a/test/fixtures/client-config/webpack.config.js b/test/fixtures/client-config/webpack.config.js
index 7890aeee50..2106890ec5 100644
--- a/test/fixtures/client-config/webpack.config.js
+++ b/test/fixtures/client-config/webpack.config.js
@@ -12,6 +12,7 @@ const HTMLContent = `
 `;
 
 module.exports = {
+  devtool: "eval-nosources-cheap-source-map",
   mode: "development",
   context: __dirname,
   stats: "none",
diff --git a/test/fixtures/provide-plugin-default/foo.js b/test/fixtures/provide-plugin-default/foo.js
index 7943185c3b..bd4904444f 100644
--- a/test/fixtures/provide-plugin-default/foo.js
+++ b/test/fixtures/provide-plugin-default/foo.js
@@ -1,8 +1,9 @@
 "use strict";
 
 // 'npm run prepare' must be run for this to work during testing
-const WebsocketClient = require("../../../client/clients/WebsocketClient");
+const WebsocketClient =
+  require("../../../client/clients/WebSocketClient").default;
 
 window.expectedClient = WebsocketClient;
 // eslint-disable-next-line camelcase, no-undef
-window.injectedClient = __webpack_dev_server_client__;
+window.injectedClient = __webpack_dev_server_client__.default;
diff --git a/test/fixtures/provide-plugin-sockjs-config/foo.js b/test/fixtures/provide-plugin-sockjs-config/foo.js
index ff91e61e5e..dd47486385 100644
--- a/test/fixtures/provide-plugin-sockjs-config/foo.js
+++ b/test/fixtures/provide-plugin-sockjs-config/foo.js
@@ -1,8 +1,8 @@
 "use strict";
 
 // 'npm run prepare' must be run for this to work during testing
-const SockJSClient = require("../../../client/clients/SockJSClient");
+const SockJSClient = require("../../../client/clients/SockJSClient").default;
 
 window.expectedClient = SockJSClient;
 // eslint-disable-next-line camelcase, no-undef
-window.injectedClient = __webpack_dev_server_client__;
+window.injectedClient = __webpack_dev_server_client__.default;
diff --git a/test/fixtures/provide-plugin-ws-config/foo.js b/test/fixtures/provide-plugin-ws-config/foo.js
index 7943185c3b..bd4904444f 100644
--- a/test/fixtures/provide-plugin-ws-config/foo.js
+++ b/test/fixtures/provide-plugin-ws-config/foo.js
@@ -1,8 +1,9 @@
 "use strict";
 
 // 'npm run prepare' must be run for this to work during testing
-const WebsocketClient = require("../../../client/clients/WebsocketClient");
+const WebsocketClient =
+  require("../../../client/clients/WebSocketClient").default;
 
 window.expectedClient = WebsocketClient;
 // eslint-disable-next-line camelcase, no-undef
-window.injectedClient = __webpack_dev_server_client__;
+window.injectedClient = __webpack_dev_server_client__.default;