fix: correctly resolve hmr dep ids and fallback to url

packages/vite/src/node/plugins/importAnalysis.ts

@@ -753,9 +753,19 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
       // normalize and rewrite accepted urls
       const normalizedAcceptedUrls = new Set<string>()
       for (const { url, start, end } of acceptedUrls) {
-        const [normalized] = await moduleGraph.resolveUrl(toAbsoluteUrl(url))
+        let normalized
+        const resolved = await this.resolve(url, importerModule.id || undefined)
+        if (resolved?.id) {
+          const mod = moduleGraph.getModuleById(resolved.id)
+          normalized = mod?.url
+        }
+        if (!normalized) {
+          const [resolved] = await moduleGraph.resolveUrl(toAbsoluteUrl(url))
+          normalized = resolved
+        }
         normalizedAcceptedUrls.add(normalized)
-        str().overwrite(start, end, JSON.stringify(normalized), {
+        const hmrAccept = normalizeHmrUrl(normalized)
+        str().overwrite(start, end, JSON.stringify(hmrAccept), {
           contentOnly: true,
         })
       }

playground/hmr/__tests__/hmr.spec.ts

@@ -779,6 +779,29 @@ if (!isBuild) {
     }, '[wow]1')
   })
 
+  test('handle virtual module accept updates', async () => {
+    await page.goto(viteTestUrl)
+    const el = await page.$('.virtual-dep')
+    expect(await el.textContent()).toBe('0')
+    editFile('importedVirtual.js', (code) => code.replace('[success]', '[wow]'))
+    await untilUpdated(async () => {
+      const el = await page.$('.virtual-dep')
+      return await el.textContent()
+    }, '[wow]')
+  })
+
+  test('invalidate virtual module and accept', async () => {
+    await page.goto(viteTestUrl)
+    const el = await page.$('.virtual-dep')
+    expect(await el.textContent()).toBe('0')
+    const btn = await page.$('.virtual-update-dep')
+    btn.click()
+    await untilUpdated(async () => {
+      const el = await page.$('.virtual-dep')
+      return await el.textContent()
+    }, '[wow]2')
+  })
+
   test('keep hmr reload after missing import on server startup', async () => {
     const file = 'missing-import/a.js'
     const importCode = "import 'missing-modules'"

playground/hmr/hmr.ts

@@ -1,4 +1,5 @@
 import { virtual } from 'virtual:file'
+import { virtual as virtualDep } from 'virtual:file-dep'
 import { foo as depFoo, nestedFoo } from './hmrDep'
 import './importing-updated'
 import './file-delete-restore'
@@ -14,17 +15,29 @@ text('.app', foo)
 text('.dep', depFoo)
 text('.nested', nestedFoo)
 text('.virtual', virtual)
+text('.virtual-dep', virtualDep)
 text('.soft-invalidation', softInvalidationMsg)
 setImgSrc('#logo', logo)
 setImgSrc('#logo-no-inline', logoNoInline)
 
+text('.virtual-dep', 0)
+
 const btn = document.querySelector('.virtual-update') as HTMLButtonElement
 btn.onclick = () => {
   if (import.meta.hot) {
     import.meta.hot.send('virtual:increment')
   }
 }
 
+const btnDep = document.querySelector(
+  '.virtual-update-dep',
+) as HTMLButtonElement
+btnDep.onclick = () => {
+  if (import.meta.hot) {
+    import.meta.hot.send('virtual:increment', '-dep')
+  }
+}
+
 if (import.meta.hot) {
   import.meta.hot.accept(({ foo }) => {
     console.log('(self-accepting 1) foo is now:', foo)
@@ -55,6 +68,10 @@ if (import.meta.hot) {
     handleDep('single dep', foo, nestedFoo)
   })
 
+  import.meta.hot.accept('virtual:file-dep', ({ virtual }) => {
+    text('.virtual-dep', virtual)
+  })
+
   import.meta.hot.accept(['./hmrDep'], ([{ foo, nestedFoo }]) => {
     handleDep('multi deps', foo, nestedFoo)
   })

playground/hmr/index.html

@@ -6,6 +6,7 @@
   />
 </div>
 <button class="virtual-update">update virtual module</button>
+<button class="virtual-update-dep">update virtual module via accept</button>
 
 <script type="module" src="./invalidation/root.js"></script>
 <script type="module" src="./hmr.ts"></script>
@@ -24,6 +25,7 @@
 <div class="custom"></div>
 <div class="toRemove"></div>
 <div class="virtual"></div>
+<div class="virtual-dep"></div>
 <div class="soft-invalidation"></div>
 <div class="invalidation-parent"></div>
 <div class="invalidation-root"></div>

playground/hmr/modules.d.ts

@@ -1,3 +1,7 @@
 declare module 'virtual:file' {
   export const virtual: string
 }
+
+declare module 'virtual:file-dep' {
+  export const virtual: string
+}

playground/hmr/vite.config.ts

@@ -45,23 +45,22 @@ function virtualPlugin(): Plugin {
   return {
     name: 'virtual-file',
     resolveId(id) {
-      if (id === 'virtual:file') {
-        return '\0virtual:file'
+      if (id.startsWith('virtual:file')) {
+        return '\0' + id
       }
     },
     load(id) {
-      if (id === '\0virtual:file') {
+      if (id.startsWith('\0virtual:file')) {
         return `\
 import { virtual as _virtual } from "/importedVirtual.js";
 export const virtual = _virtual + '${num}';`
       }
     },
     configureServer(server) {
-      server.environments.client.hot.on('virtual:increment', async () => {
-        const mod =
-          await server.environments.client.moduleGraph.getModuleByUrl(
-            '\0virtual:file',
-          )
+      server.environments.client.hot.on('virtual:increment', async (suffix) => {
+        const mod = await server.environments.client.moduleGraph.getModuleById(
+          '\0virtual:file' + (suffix || ''),
+        )
         if (mod) {
           num++
           server.environments.client.reloadModule(mod)