fix: fix hmr of dynamically loaded vue sfc modules in apps with tailwind

sxzz · sxzz · commit 6373cd082980 · 2025-11-19T11:26:36.000+08:00
ref: vitejs/vite-plugin-vue@0a883f7
diff --git a/src/core/handleHotUpdate.ts b/src/core/handleHotUpdate.ts
@@ -19,8 +19,6 @@ import type { SFCBlock, SFCDescriptor } from 'vue/compiler-sfc'
 
 const debug = createDebug('vite:hmr')
 
-const directRequestRE = /[&?]direct\b/
-
 /**
  * Vite-specific HMR handling
  */
@@ -40,17 +38,19 @@ export async function handleHotUpdate(
   const { descriptor } = createDescriptor(file, content, options, true)
 
   let needRerender = false
+  const nonJsModules = modules.filter((m) => m.type !== 'js')
+  const jsModules = modules.filter((m) => m.type === 'js')
   const affectedModules = new Set<ModuleNode | undefined>(
-    modules.filter((mod) => mod.type !== 'js'), // this plugin does not handle non-js modules
+    nonJsModules, // this plugin does not handle non-js modules
   )
-  const mainModule = getMainModule(modules)
-  const templateModule = modules.find((m) => /type=template/.test(m.url))
+  const mainModule = getMainModule(jsModules)
+  const templateModule = jsModules.find((m) => /type=template/.test(m.url))
 
   // trigger resolveScript for descriptor so that we'll have the AST ready
   resolveScript('vite', descriptor, { ...options, ssr: false }, customElement)
   const scriptChanged = hasScriptChanged(prevDescriptor, descriptor)
   if (scriptChanged) {
-    affectedModules.add(getScriptModule(modules) || mainModule)
+    affectedModules.add(getScriptModule(jsModules) || mainModule)
   }
 
   if (!isEqualBlock(descriptor.template, prevDescriptor.template)) {
@@ -91,11 +91,10 @@ export async function handleHotUpdate(
     const prev = prevStyles[i]
     if (!prev || !isEqualBlock(prev, next)) {
       didUpdateStyle = true
-      const mod = modules.find(
+      const mod = jsModules.find(
         (m) =>
           m.url.includes(`type=style&index=${i}`) &&
-          m.url.endsWith(`.${next.lang || 'css'}`) &&
-          !directRequestRE.test(m.url),
+          m.url.endsWith(`.${next.lang || 'css'}`),
       )
       if (mod) {
         affectedModules.add(mod)
@@ -122,7 +121,7 @@ export async function handleHotUpdate(
     for (const [i, next] of nextCustoms.entries()) {
       const prev = prevCustoms[i]
       if (!prev || !isEqualBlock(prev, next)) {
-        const mod = modules.find((m) =>
+        const mod = jsModules.find((m) =>
           m.url.includes(`type=${prev.type}&index=${i}`),
         )
         if (mod) {
@@ -323,9 +322,9 @@ function hasScriptChanged(prev: SFCDescriptor, next: SFCDescriptor): boolean {
   return false
 }
 
-function getMainModule(modules: ModuleNode[]) {
+function getMainModule(jsModules: ModuleNode[]) {
   return (
-    modules
+    jsModules
       .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
@@ -336,8 +335,8 @@ function getMainModule(modules: ModuleNode[]) {
   )
 }
 
-function getScriptModule(modules: ModuleNode[]) {
-  return modules.find((m) => /type=script.*&lang\.\w+$/.test(m.url))
+function getScriptModule(jsModules: ModuleNode[]) {
+  return jsModules.find((m) => /type=script.*&lang\.\w+$/.test(m.url))
 }
 
 export function handleTypeDepChange(
