fix: fix accumulated stacks in error overlay (#16393)

Author: hi-ogawa

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)

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) => {