From eb719bfb0996f80e7561f95d13745cc852ddfced Mon Sep 17 00:00:00 2001
From: Rom <git@brillout.com>
Date: Tue, 15 Nov 2022 08:48:20 +0100
Subject: [PATCH] fix: handle HMR for Vue SFC with query parameters (fix #9341)
 (#10794)

---
 packages/plugin-vue/src/handleHotUpdate.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index efc39a49..d1d4ae9f 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -33,9 +33,14 @@ export async function handleHotUpdate(
 
   let needRerender = false
   const affectedModules = new Set<ModuleNode | undefined>()
-  const mainModule = modules.find(
-    (m) => !/type=/.test(m.url) || /type=script/.test(m.url)
-  )
+  const mainModule = modules
+    .filter((m) => !/type=/.test(m.url) || /type=script/.test(m.url))
+    // #9341
+    // We pick the module with the shortest URL in order to pick the module
+    // with the lowest number of query parameters.
+    .sort((m1, m2) => {
+      return m1.url.length - m2.url.length
+    })[0]
   const templateModule = modules.find((m) => /type=template/.test(m.url))
 
   if (hasScriptChanged(prevDescriptor, descriptor)) {