fix(vite): assign different hmr port for each instance (#3169)

Co-authored-by: danielroe <danielroe@users.noreply.github.com>

packages/vite/package.json

@@ -29,6 +29,7 @@
     "escape-string-regexp": "^5.0.0",
     "externality": "^0.1.6",
     "fs-extra": "^10.0.0",
+    "get-port-please": "^2.3.0",
     "knitwork": "^0.1.0",
     "magic-string": "^0.25.7",
     "mlly": "^0.4.2",

packages/vite/src/client.ts

@@ -6,6 +6,7 @@ import viteJsxPlugin from '@vitejs/plugin-vue-jsx'
 import type { Connect } from 'vite'
 
 import { joinURL } from 'ufo'
+import { getPort } from 'get-port-please'
 import { cacheDirPlugin } from './plugins/cache-dir'
 import { analyzePlugin } from './plugins/analyze'
 import { wpfs } from './utils/wpfs'
@@ -15,6 +16,13 @@ import { devStyleSSRPlugin } from './plugins/dev-ssr-css'
 import { DynamicBasePlugin, RelativeAssetPlugin } from './plugins/dynamic-base'
 
 export async function buildClient (ctx: ViteBuildContext) {
+  // TODO: After nitropack refactor, try if we can resuse the same server port as Nuxt
+  const hmrPortDefault = 24678 // Vite's default HMR port
+  const hmrPort = await getPort({
+    port: hmrPortDefault,
+    ports: Array.from({ length: 20 }, (_, i) => hmrPortDefault + 1 + i)
+  })
+
   const clientConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, {
     define: {
       'process.server': false,
@@ -48,7 +56,11 @@ export async function buildClient (ctx: ViteBuildContext) {
       })
     ],
     server: {
-      middlewareMode: true
+      middlewareMode: true,
+      hmr: {
+        port: hmrPort,
+        clientPort: hmrPort
+      }
     }
   } as ViteOptions)
 

yarn.lock

@@ -3263,6 +3263,7 @@ __metadata:
     escape-string-regexp: ^5.0.0
     externality: ^0.1.6
     fs-extra: ^10.0.0
+    get-port-please: ^2.3.0
     knitwork: ^0.1.0
     magic-string: ^0.25.7
     mlly: ^0.4.2
@@ -11231,6 +11232,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-port-please@npm:^2.3.0":
+  version: 2.3.0
+  resolution: "get-port-please@npm:2.3.0"
+  dependencies:
+    fs-memo: ^1.2.0
+  checksum: ae361940392d44a3157f9256e366ea4f979202d7c52a7d323eebc0cbe24e32b1b196405be0b06af1d898db0f6d36b859479489f849e7ee698aefa9db1110c292
+  languageName: node
+  linkType: hard
+
 "get-port@npm:^5.1.1":
   version: 5.1.1
   resolution: "get-port@npm:5.1.1"