fix(hmr): Fix circular dep root starts hmr, and has invalidate in it,…

packages/vite/src/node/server/hmr.ts

@@ -121,16 +121,17 @@ export async function handleHMRUpdate(
     return
   }
 
-  updateModules(shortFile, hmrContext.modules, timestamp, server)
+  updateModules(file, hmrContext.modules, timestamp, server)
 }
 
 export function updateModules(
   file: string,
   modules: ModuleNode[],
   timestamp: number,
-  { config, ws }: ViteDevServer,
+  { config, ws, moduleGraph }: ViteDevServer,
   afterInvalidation?: boolean,
 ): void {
+  const shortName = getShortName(file, config.root)
   const updates: Update[] = []
   const invalidatedModules = new Set<ModuleNode>()
   let needFullReload = false
@@ -145,7 +146,10 @@ export function updateModules(
       boundary: ModuleNode
       acceptedVia: ModuleNode
     }>()
-    const hasDeadEnd = propagateUpdate(mod, boundaries)
+    const hasDeadEnd = propagateUpdate(mod, boundaries, [
+      ...(moduleGraph.getModulesByFile(file) || []),
+      mod,
+    ])
     if (hasDeadEnd) {
       needFullReload = true
       continue
@@ -166,7 +170,7 @@ export function updateModules(
   }
 
   if (needFullReload) {
-    config.logger.info(colors.green(`page reload `) + colors.dim(file), {
+    config.logger.info(colors.green(`page reload `) + colors.dim(shortName), {
       clear: !afterInvalidation,
       timestamp: true,
     })
@@ -177,7 +181,7 @@ export function updateModules(
   }
 
   if (updates.length === 0) {
-    debugHmr(colors.yellow(`no update happened `) + colors.dim(file))
+    debugHmr(colors.yellow(`no update happened `) + colors.dim(shortName))
     return
   }
 
@@ -201,12 +205,7 @@ export async function handleFileAddUnlink(
   modules.push(...getAffectedGlobModules(file, server))
 
   if (modules.length > 0) {
-    updateModules(
-      getShortName(file, server.config.root),
-      unique(modules),
-      Date.now(),
-      server,
-    )
+    updateModules(file, unique(modules), Date.now(), server)
   }
 }
 

packages/vite/src/node/server/index.ts

@@ -67,12 +67,7 @@ import type { ModuleNode } from './moduleGraph'
 import { ModuleGraph } from './moduleGraph'
 import { errorMiddleware, prepareError } from './middlewares/error'
 import type { HmrOptions } from './hmr'
-import {
-  getShortName,
-  handleFileAddUnlink,
-  handleHMRUpdate,
-  updateModules,
-} from './hmr'
+import { handleFileAddUnlink, handleHMRUpdate, updateModules } from './hmr'
 import { openBrowser } from './openBrowser'
 import type { TransformOptions, TransformResult } from './transformRequest'
 import { transformRequest } from './transformRequest'
@@ -518,9 +513,9 @@ export async function createServer(
           (message ? ` ${message}` : ''),
         { timestamp: true },
       )
-      const file = getShortName(mod.file!, config.root)
+
       updateModules(
-        file,
+        mod.file!,
         [...mod.importers],
         mod.lastHMRTimestamp,
         server,

playground/hmr/__tests__/hmr.spec.ts

@@ -20,7 +20,7 @@ test('should render', async () => {
 
 if (!isBuild) {
   test('should connect', async () => {
-    expect(browserLogs.length).toBe(3)
+    expect(browserLogs.length).toBe(4)
     expect(browserLogs.some((msg) => msg.match('connected'))).toBe(true)
     browserLogs.length = 0
   })
@@ -171,6 +171,14 @@ if (!isBuild) {
     await untilUpdated(() => el.textContent(), 'child updated')
   })
 
+  test('invalidate in circular dep should not trigger infinite HMR', async () => {
+    const el = await page.$('.invalidation-circular-deps')
+    await editFile('invalidation-circular-deps/child.js', (code) =>
+      code.replace('child', 'child updated'),
+    )
+    await untilUpdated(() => el.textContent(), 'child updated')
+  })
+
   test('plugin hmr handler + custom event', async () => {
     const el = await page.$('.custom')
     editFile('customFile.js', (code) => code.replace('custom', 'edited'))

playground/hmr/hmr.ts

@@ -3,6 +3,7 @@ import { virtual } from 'virtual:file'
 import { foo as depFoo, nestedFoo } from './hmrDep'
 import './importing-updated'
 import './invalidation/parent'
+import './invalidation-circular-deps/parent'
 import './file-delete-restore'
 
 export const foo = 1

playground/hmr/index.html

@@ -23,6 +23,7 @@
 <div class="custom"></div>
 <div class="virtual"></div>
 <div class="invalidation"></div>
+<div class="invalidation-circular-deps"></div>
 <div class="custom-communication"></div>
 <div class="css-prev"></div>
 <div class="css-post"></div>

playground/hmr/invalidation-circular-deps/child.js

@@ -0,0 +1,11 @@
+import './parent'
+
+if (import.meta.hot) {
+  // Need to accept, to register a callback for HMR
+  import.meta.hot.accept(() => {
+    // Trigger HMR in importers
+    import.meta.hot.invalidate()
+  })
+}
+
+export const value = 'child'

playground/hmr/invalidation-circular-deps/parent.js

@@ -0,0 +1,10 @@
+import { value } from './child'
+
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}
+
+console.log('(invalidation circular deps) parent is executing')
+setTimeout(() => {
+  document.querySelector('.invalidation-circular-deps').innerHTML = value
+})