diff --git a/packages/vite/src/node/server/middlewares/indexHtml.ts b/packages/vite/src/node/server/middlewares/indexHtml.ts index c752febbdfaa6c..ae432900d46756 100644 --- a/packages/vite/src/node/server/middlewares/indexHtml.ts +++ b/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` diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts index 14ada2ccc5b36a..55b587f928fe30 100644 --- a/playground/html/__tests__/html.spec.ts +++ b/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') +}) diff --git a/playground/html/transform-inline-js.html b/playground/html/transform-inline-js.html new file mode 100644 index 00000000000000..bfe65686e6970d --- /dev/null +++ b/playground/html/transform-inline-js.html @@ -0,0 +1,5 @@ +