From 510038e66dbd4e2312d2dfaef9321ba7c99c2fef Mon Sep 17 00:00:00 2001
From: Kristjan ESPERANTO <35647502+KristjanESPERANTO@users.noreply.github.com>
Date: Tue, 4 Aug 2026 00:10:21 +0200
Subject: [PATCH] refactor(socket): load Socket.IO client via ESM

---
 index.html                  |  1 -
 js/socketclient.js          | 13 +++++++------
 tests/utils/vitest-setup.js |  4 ++++
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 806fcc34f7..713ad0825d 100644
--- a/index.html
+++ b/index.html
@@ -41,7 +41,6 @@
       <div class="region bottom right"><div class="container"></div></div>
     </div>
     <div class="region fullscreen above"><div class="container"></div></div>
-    <script type="text/javascript" src="socket.io/socket.io.js"></script>
     <script type="text/javascript" src="node_modules/nunjucks/browser/nunjucks.min.js"></script>
     <script type="text/javascript" src="js/vendor.js"></script>
     <script type="text/javascript" src="defaultmodules/defaultmodules.js"></script>
diff --git a/js/socketclient.js b/js/socketclient.js
index bf793c9698..29f5d18c88 100644
--- a/js/socketclient.js
+++ b/js/socketclient.js
@@ -1,18 +1,16 @@
+// eslint-disable-next-line import-x/no-unresolved -- Socket.IO serves this module at runtime.
+const { io } = await import(/* @vite-ignore */ "/socket.io/socket.io.esm.min.js");
+
 export const MMSocket = function (moduleName) {
 	if (typeof moduleName !== "string") {
 		throw new Error("Please set the module name for the MMSocket.");
 	}
 
-	const ioClient = globalThis.io;
-	if (typeof ioClient !== "function") {
-		throw new Error("socket.io client is not available.");
-	}
-
 	this.moduleName = moduleName;
 
 	// Private Methods
 	const base = globalThis.config?.basePath ?? "/";
-	this.socket = ioClient(`/${this.moduleName}`, {
+	this.socket = io(`/${this.moduleName}`, {
 		path: `${base}socket.io`,
 		pingInterval: 120000, // send pings every 2 mins
 		pingTimeout: 120000 // wait up to 2 mins for a pong
@@ -45,5 +43,8 @@ export const MMSocket = function (moduleName) {
 	};
 };
 
+// Legacy global bridge for third-party modules that reference io directly.
+globalThis.io = io;
+
 // Legacy global bridge for third-party modules that reference MMSocket directly.
 if (!globalThis.MMSocket) globalThis.MMSocket = MMSocket;
diff --git a/tests/utils/vitest-setup.js b/tests/utils/vitest-setup.js
index c1e0a3bec9..e5d47f8abe 100644
--- a/tests/utils/vitest-setup.js
+++ b/tests/utils/vitest-setup.js
@@ -6,6 +6,10 @@
 const Module = require("node:module");
 const path = require("node:path");
 
+vi.doMock(path.resolve(__dirname, "../..", "js", "socketclient.js"), () => ({
+	MMSocket () {}
+}));
+
 // Set test mode flag for application code to detect test environment
 process.env.mmTestMode = "true";