fix(hmr): trigger hmr for missing file import errored module after file creation (#16303)

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

@@ -311,6 +311,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           }
           // fix#9534, prevent the importerModuleNode being stopped from propagating updates
           importerModule.isSelfAccepting = false
+          moduleGraph._hasResolveFailedErrorModules.add(importerModule)
           return this.error(
             `Failed to resolve import "${url}" from "${normalizePath(
               path.relative(process.cwd(), importerFile),

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

@@ -163,6 +163,11 @@ export async function handleHMRUpdate(
   }
 
   const mods = new Set(moduleGraph.getModulesByFile(file))
+  if (type === 'create') {
+    for (const mod of moduleGraph._hasResolveFailedErrorModules) {
+      mods.add(mod)
+    }
+  }
   if (type === 'create' || type === 'delete') {
     for (const mod of getAffectedGlobModules(file, server)) {
       mods.add(mod)

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

@@ -108,6 +108,9 @@ export class ModuleGraph {
     Promise<ModuleNode> | ModuleNode
   >()
 
+  /** @internal */
+  _hasResolveFailedErrorModules = new Set<ModuleNode>()
+
   constructor(
     private resolveId: (
       url: string,
@@ -229,6 +232,8 @@ export class ModuleGraph {
         )
       }
     })
+
+    this._hasResolveFailedErrorModules.delete(mod)
   }
 
   invalidateAll(): void {

playground/hmr/__tests__/hmr.spec.ts

@@ -962,4 +962,23 @@ if (!isBuild) {
     editFile('css-deps/dep.js', (code) => code.replace(`red`, `green`))
     await untilUpdated(() => getColor('.css-deps'), 'green')
   })
+
+  test('hmr should happen after missing file is created', async () => {
+    const file = 'missing-file/a.js'
+    const code = 'console.log("a.js")'
+
+    await untilBrowserLogAfter(
+      () =>
+        page.goto(viteTestUrl + '/missing-file/index.html', {
+          waitUntil: 'load',
+        }),
+      /connected/, // wait for HMR connection
+    )
+
+    await untilBrowserLogAfter(async () => {
+      const loadPromise = page.waitForEvent('load')
+      addFile(file, code)
+      await loadPromise
+    }, [/connected/, 'a.js'])
+  })
 }

playground/hmr/missing-file/index.html

@@ -0,0 +1,2 @@
+<div>Page</div>
+<script type="module" src="main.js"></script>

playground/hmr/missing-file/main.js

@@ -0,0 +1 @@
+import './a.js'