diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index ceccdf345fbce4..509b5048da6d47 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -9,7 +9,7 @@ import '@vite/env'
 declare const __BASE__: string
 declare const __HMR_PROTOCOL__: string | null
 declare const __HMR_HOSTNAME__: string | null
-declare const __HMR_PORT__: string | null
+declare const __HMR_PORT__: number | null
 declare const __HMR_DIRECT_TARGET__: string
 declare const __HMR_BASE__: string
 declare const __HMR_TIMEOUT__: number
diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
index d63c72d6143216..4eb1654d09d7a8 100644
--- a/packages/vite/src/node/plugins/clientInjections.ts
+++ b/packages/vite/src/node/plugins/clientInjections.ts
@@ -26,11 +26,9 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
 
         // hmr.clientPort -> hmr.port
         // -> (24678 if middleware mode) -> new URL(import.meta.url).port
-        let port = hmrConfig
-          ? String(hmrConfig.clientPort || hmrConfig.port)
-          : null
+        let port = hmrConfig?.clientPort || hmrConfig?.port || null
         if (config.server.middlewareMode) {
-          port ||= '24678'
+          port ||= 24678
         }
 
         const devBase = config.base