fix: invalidate module cache on unlinked (#2629), fix #2630

packages/playground/file-delete-restore/App.jsx

@@ -0,0 +1,12 @@
+import { useState } from 'react'
+import Child from './Child'
+
+function App() {
+  return (
+    <div className="App">
+      <Child />
+    </div>
+  )
+}
+
+export default App

packages/playground/file-delete-restore/Child.jsx

@@ -0,0 +1,3 @@
+export default function Child() {
+  return <p>Child state 1</p>
+}

packages/playground/file-delete-restore/__tests__/file-delete-restore.spec.ts

@@ -0,0 +1,61 @@
+import {
+  editFile,
+  untilUpdated,
+  removeFile,
+  addFile,
+  isBuild
+} from '../../testUtils'
+
+if (!isBuild) {
+  test('should hmr when file is deleted and restored', async () => {
+    await untilUpdated(() => page.textContent('p'), 'Child state 1')
+
+    editFile('Child.jsx', (code) =>
+      code.replace('Child state 1', 'Child state 2')
+    )
+
+    await untilUpdated(() => page.textContent('p'), 'Child state 2')
+
+    editFile('App.jsx', (code) =>
+      code
+        .replace(`import Child from './Child'`, '')
+        .replace(`<Child />`, '<p>Child deleted</p>')
+    )
+    removeFile('Child.jsx')
+    await untilUpdated(() => page.textContent('p'), 'Child deleted')
+
+    // restore Child.jsx
+    addFile(
+      'Child.jsx',
+      ` export default function Child() {
+          return <p>Child state 1</p>
+        }
+      `
+    )
+
+    // restore App.jsx
+    editFile(
+      'App.jsx',
+      (code) =>
+        `import { useState } from 'react'
+      import Child from './Child'
+      
+      function App() {
+        return (
+          <div className="App">
+            <Child />
+          </div>
+        )
+      }
+      
+      export default App
+      `
+    )
+
+    await untilUpdated(() => page.textContent('p'), 'Child state 1')
+  })
+} else {
+  test('dummy test to make jest happy', async () => {
+    // Your test suite must contain at least one test.
+  })
+}

packages/playground/file-delete-restore/index.html

@@ -0,0 +1,8 @@
+<div id="app"></div>
+<script type="module">
+  import React from 'react'
+  import ReactDOM from 'react-dom'
+  import App from './App.jsx'
+
+  ReactDOM.render(React.createElement(App), document.getElementById('app'))
+</script>

packages/playground/file-delete-restore/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "test-file-delete-restore",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react-refresh": "^1.3.1"
+  }
+}

packages/playground/file-delete-restore/vite.config.js

@@ -0,0 +1,15 @@
+const reactRefresh = require('@vitejs/plugin-react-refresh')
+
+/**
+ * @type {import('vite').UserConfig}
+ */
+module.exports = {
+  plugins: [reactRefresh()],
+  build: {
+    // to make tests faster
+    minify: false
+  },
+  esbuild: {
+    jsxInject: `import React from 'react'`
+  }
+}

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

@@ -165,25 +165,25 @@ export async function handleFileAddUnlink(
   server: ViteDevServer,
   isUnlink = false
 ) {
+  const modules = [...(server.moduleGraph.getModulesByFile(file) ?? [])]
   if (isUnlink && file in server._globImporters) {
     delete server._globImporters[file]
   } else {
-    const modules = []
     for (const i in server._globImporters) {
       const { module, base, pattern } = server._globImporters[i]
       const relative = path.relative(base, file)
       if (match(relative, pattern)) {
         modules.push(module)
       }
     }
-    if (modules.length > 0) {
-      updateModules(
-        getShortName(file, server.config.root),
-        modules,
-        Date.now(),
-        server
-      )
-    }
+  }
+  if (modules.length > 0) {
+    updateModules(
+      getShortName(file, server.config.root),
+      modules,
+      Date.now(),
+      server
+    )
   }
 }