fix(html): fix inline proxy modules invalidation (#18696)

Author: hi-ogawa

packages/vite/src/node/server/middlewares/indexHtml.ts

@@ -218,6 +218,7 @@ const devHtmlHook: IndexHtmlTransformHook = async (
   )
   const styleUrl: AssetNode[] = []
   const inlineStyles: InlineStyleAttribute[] = []
+  const inlineModulePaths: string[] = []
 
   const addInlineModule = (
     node: DefaultTreeAdapterMap['element'],
@@ -246,13 +247,8 @@ const devHtmlHook: IndexHtmlTransformHook = async (
 
     // inline js module. convert to src="proxy" (dev only, base is never relative)
     const modulePath = `${proxyModuleUrl}?html-proxy&index=${inlineModuleIndex}.${ext}`
+    inlineModulePaths.push(modulePath)
 
-    // invalidate the module so the newly cached contents will be served
-    const clientModuleGraph = server?.environments.client.moduleGraph
-    const module = clientModuleGraph?.getModuleById(modulePath)
-    if (module) {
-      clientModuleGraph!.invalidateModule(module)
-    }
     s.update(
       node.sourceCodeLocation!.startOffset,
       node.sourceCodeLocation!.endOffset,
@@ -350,6 +346,19 @@ const devHtmlHook: IndexHtmlTransformHook = async (
     }
   })
 
+  // invalidate the module so the newly cached contents will be served
+  const clientModuelGraph = server?.environments.client.moduleGraph
+  if (clientModuelGraph) {
+    await Promise.all(
+      inlineModulePaths.map(async (url) => {
+        const module = await clientModuelGraph.getModuleByUrl(url)
+        if (module) {
+          clientModuelGraph.invalidateModule(module)
+        }
+      }),
+    )
+  }
+
   await Promise.all([
     ...styleUrl.map(async ({ start, end, code }, index) => {
       const url = `${proxyModulePath}?html-proxy&direct&index=${index}.css`

playground/html/__tests__/html.spec.ts

@@ -510,3 +510,12 @@ test('escape html attribute', async () => {
   const el = await page.$('.unescape-div')
   expect(el).toBeNull()
 })
+
+test('invalidate inline proxy module on reload', async () => {
+  await page.goto(`${viteTestUrl}/transform-inline-js`)
+  expect(await page.textContent('.test')).toContain('ok')
+  await page.reload()
+  expect(await page.textContent('.test')).toContain('ok')
+  await page.reload()
+  expect(await page.textContent('.test')).toContain('ok')
+})

playground/html/transform-inline-js.html

@@ -0,0 +1,5 @@
+<div>id: {{ id }}</div>
+<div class="test">test: <span id="{{ id }}">???</span></div>
+<script type="module">
+  document.getElementById('{{ id }}').textContent = 'ok'
+</script>

playground/html/vite.config.js

@@ -35,6 +35,7 @@ export default defineConfig({
         serveBothFile: resolve(__dirname, 'serve/both.html'),
         serveBothFolder: resolve(__dirname, 'serve/both/index.html'),
         write: resolve(__dirname, 'write.html'),
+        'transform-inline-js': resolve(__dirname, 'transform-inline-js.html'),
         relativeInput: relative(
           process.cwd(),
           resolve(__dirname, 'relative-input.html'),
@@ -249,6 +250,19 @@ ${
         },
       },
     },
+    {
+      name: 'transform-inline-js',
+      transformIndexHtml: {
+        order: 'pre',
+        handler(html, ctx) {
+          if (!ctx.filename.endsWith('html/transform-inline-js.html')) return
+          return html.replaceAll(
+            '{{ id }}',
+            Math.random().toString(36).slice(2),
+          )
+        },
+      },
+    },
     serveExternalPathPlugin(),
   ],
 })