From 102c2fd5ad32a607f2b14dd728e8a802b7ddce34 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Sat, 13 Apr 2024 23:48:08 +0900
Subject: [PATCH] fix: fix accumulated stacks in error overlay (#16393)

---
 packages/vite/src/client/overlay.ts    |  5 +----
 playground/html/__tests__/html.spec.ts | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index f0e34cac19e68e..63f570be488efb 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -165,7 +165,6 @@ kbd {
 `
 
 // Error Template
-let template: HTMLElement
 const createTemplate = () =>
   h(
     'div',
@@ -214,9 +213,7 @@ export class ErrorOverlay extends HTMLElement {
   constructor(err: ErrorPayload['err'], links = true) {
     super()
     this.root = this.attachShadow({ mode: 'open' })
-
-    template ??= createTemplate()
-    this.root.appendChild(template)
+    this.root.appendChild(createTemplate())
 
     codeframeRE.lastIndex = 0
     const hasFrame = err.frame && codeframeRE.test(err.frame)
diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts
index 1baab83cf6a792..ed06f730308a4d 100644
--- a/playground/html/__tests__/html.spec.ts
+++ b/playground/html/__tests__/html.spec.ts
@@ -274,6 +274,29 @@ describe.runIf(isServe)('invalid', () => {
     expect(isVisbleOverlay).toBeFalsy()
   })
 
+  test('stack is updated', async () => {
+    await page.goto(viteTestUrl + '/invalid.html')
+
+    const errorOverlay = await page.waitForSelector('vite-error-overlay')
+    const hiddenPromise = errorOverlay.waitForElementState('hidden')
+    await page.keyboard.press('Escape')
+    await hiddenPromise
+
+    viteServer.hot.send({
+      type: 'error',
+      err: {
+        message: 'someError',
+        stack: [
+          'Error: someError',
+          '    at someMethod (/some/file.ts:1:2)',
+        ].join('\n'),
+      },
+    })
+    const newErrorOverlay = await page.waitForSelector('vite-error-overlay')
+    const stack = await newErrorOverlay.$$eval('.stack', (m) => m[0].innerHTML)
+    expect(stack).toMatch(/^Error: someError/)
+  })
+
   test('should reload when fixed', async () => {
     await page.goto(viteTestUrl + '/invalid.html')
     await editFile('invalid.html', (content) => {