From a8cf0de6fe524388590e5eef0865eb3a0f0817d3 Mon Sep 17 00:00:00 2001
From: Seokju Na <seokju.me@gmail.com>
Date: Tue, 12 Nov 2024 15:22:42 +0900
Subject: [PATCH 1/3] fix overlay not appearing when multiple vite clients were
 loaded

---
 packages/vite/src/client/client.ts  |  9 +++++++--
 packages/vite/src/client/overlay.ts | 13 +++++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index ecf57cb07a3be5..2fd15240a2e559 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -6,7 +6,11 @@ import {
   createWebSocketModuleRunnerTransport,
   normalizeModuleRunnerTransport,
 } from '../shared/moduleRunnerTransport'
-import { ErrorOverlay, overlayId } from './overlay'
+import {
+  type ErrorOverlay,
+  getErrorOverlayConstructor,
+  overlayId,
+} from './overlay'
 import '@vite/env'
 
 // injected by the hmr plugin when served
@@ -307,8 +311,9 @@ const enableOverlay = __HMR_ENABLE_OVERLAY__
 const hasDocument = 'document' in globalThis
 
 function createErrorOverlay(err: ErrorPayload['err']) {
+  const ErrorOverlayConstructor = getErrorOverlayConstructor()
   clearErrorOverlay()
-  document.body.appendChild(new ErrorOverlay(err))
+  document.body.appendChild(new ErrorOverlayConstructor(err))
 }
 
 function clearErrorOverlay() {
diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index 63f570be488efb..146543ae3a1182 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -295,3 +295,16 @@ const { customElements } = globalThis // Ensure `customElements` is defined befo
 if (customElements && !customElements.get(overlayId)) {
   customElements.define(overlayId, ErrorOverlay)
 }
+
+type Constructor<T, Args extends unknown[] = any[]> = new (...args: Args) => T
+
+export function getErrorOverlayConstructor(): Constructor<ErrorOverlay> {
+  const { customElements } = globalThis
+  if (customElements) {
+    const ElementConstructor = customElements.get(overlayId)
+    if (ElementConstructor) {
+      return ElementConstructor as Constructor<ErrorOverlay>
+    }
+  }
+  return ErrorOverlay
+}

From 4ac57e6315945143be2c399f0920f6e18b4ea12e Mon Sep 17 00:00:00 2001
From: Seokju Na <seokju.me@gmail.com>
Date: Tue, 12 Nov 2024 21:41:19 +0900
Subject: [PATCH 2/3] fix

---
 packages/vite/src/client/client.ts  | 15 +++++++++------
 packages/vite/src/client/overlay.ts | 13 -------------
 2 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index 2fd15240a2e559..889ec499ace060 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -6,11 +6,7 @@ import {
   createWebSocketModuleRunnerTransport,
   normalizeModuleRunnerTransport,
 } from '../shared/moduleRunnerTransport'
-import {
-  type ErrorOverlay,
-  getErrorOverlayConstructor,
-  overlayId,
-} from './overlay'
+import { ErrorOverlay, overlayId } from './overlay'
 import '@vite/env'
 
 // injected by the hmr plugin when served
@@ -311,7 +307,14 @@ const enableOverlay = __HMR_ENABLE_OVERLAY__
 const hasDocument = 'document' in globalThis
 
 function createErrorOverlay(err: ErrorPayload['err']) {
-  const ErrorOverlayConstructor = getErrorOverlayConstructor()
+  const { customElements } = globalThis
+  let ErrorOverlayConstructor
+  if (customElements) {
+    ErrorOverlayConstructor = customElements.get(overlayId)
+  }
+  if (!ErrorOverlayConstructor) {
+    ErrorOverlayConstructor = ErrorOverlay
+  }
   clearErrorOverlay()
   document.body.appendChild(new ErrorOverlayConstructor(err))
 }
diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
index 146543ae3a1182..63f570be488efb 100644
--- a/packages/vite/src/client/overlay.ts
+++ b/packages/vite/src/client/overlay.ts
@@ -295,16 +295,3 @@ const { customElements } = globalThis // Ensure `customElements` is defined befo
 if (customElements && !customElements.get(overlayId)) {
   customElements.define(overlayId, ErrorOverlay)
 }
-
-type Constructor<T, Args extends unknown[] = any[]> = new (...args: Args) => T
-
-export function getErrorOverlayConstructor(): Constructor<ErrorOverlay> {
-  const { customElements } = globalThis
-  if (customElements) {
-    const ElementConstructor = customElements.get(overlayId)
-    if (ElementConstructor) {
-      return ElementConstructor as Constructor<ErrorOverlay>
-    }
-  }
-  return ErrorOverlay
-}

From df14baa87cca9c983bb4033f98000ea458c3d86f Mon Sep 17 00:00:00 2001
From: Seokju Na <seokju.me@gmail.com>
Date: Thu, 21 Nov 2024 14:03:06 +0900
Subject: [PATCH 3/3] apply review

---
 packages/vite/src/client/client.ts | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/packages/vite/src/client/client.ts b/packages/vite/src/client/client.ts
index 889ec499ace060..fdf13ded820b28 100644
--- a/packages/vite/src/client/client.ts
+++ b/packages/vite/src/client/client.ts
@@ -307,16 +307,12 @@ const enableOverlay = __HMR_ENABLE_OVERLAY__
 const hasDocument = 'document' in globalThis
 
 function createErrorOverlay(err: ErrorPayload['err']) {
+  clearErrorOverlay()
   const { customElements } = globalThis
-  let ErrorOverlayConstructor
   if (customElements) {
-    ErrorOverlayConstructor = customElements.get(overlayId)
-  }
-  if (!ErrorOverlayConstructor) {
-    ErrorOverlayConstructor = ErrorOverlay
+    const ErrorOverlayConstructor = customElements.get(overlayId)!
+    document.body.appendChild(new ErrorOverlayConstructor(err))
   }
-  clearErrorOverlay()
-  document.body.appendChild(new ErrorOverlayConstructor(err))
 }
 
 function clearErrorOverlay() {