The ErrorOverlay element was defined somewhere else before it was defined in overlay.

[Eleg-i]

Describe the bug

I encountered a problem in the project I’m working on, the overlay in the browser cause TypeError: Illegal constructor.

After investigation, I found that the overlay of Vite has defined a custom element ErrorOverlay, but before defining it, it will check whether the ErrorOverlay element has been defined. If it has been defined, it will skip the redefinition of the ErrorOverlay element. The key point is that although the declaration is skipped here, all the custom elements used in the subsequent code are the undefined ErrorOverlay elements here, which will cause the above error.

Here I hope to optimize the check for whether the ErrorOverlay element has been defined. I suggest two solutions: when it is detected that the ErrorOverlay element has been defined, replace the local ErrorOverlay element with the defined element, or disable the subsequent display of the ErrorOverlay element logic after printing a friendly error prompt.

As for why there are duplicate custom ErrorOverlay elements here, my specific scenario is that I use Vite for multiple projects and then integrate them into the same window context in a browser, which can be considered a micro-application scenario. This will lead to multiple vite client scripts being introduced.

I have solved this problem locally through a patch. The solution I used is to replace the locally defined elements with the declared custom elements.
Example：

// https://github.com/vitejs/vite/blob/6cccef78a52492c24d9b28f3a1784824f34f5cc3/packages/vite/src/client/overlay.ts#L295C1-L297C2
- if (customElements && !customElements.get(overlayId)) {
- customElements.define(overlayId, ErrorOverlay)
+ if (customElements) {
+   const existErrorOverlay = customElements.get(overlayId)
+   if (existErrorOverlay) ErrorOverlay = existErrorOverlay
+   else customElements.define(overlayId, ErrorOverlay);
}

If you need me to provide a PR, please let me know.

Reproduction

https://stackblitz.com/edit/vitejs-vite-azzv3z?file=index.html

Steps to reproduce

see https://stackblitz.com/edit/vitejs-vite-azzv3z?file=index.html

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
    Memory: 17.77 GB / 31.69 GB
  Binaries:
    Node: 20.11.1 - D:\software\nodejs\node.EXE
    npm: 10.2.4 - D:\software\nodejs\npm.CMD
    pnpm: 8.15.6 - D:\software\nodejs\node_modules\npm\global-node-modules\pnpm.CMD
  Browsers:
    Edge: Spartan (44.22621.232.0), Chromium (123.0.2420.97), ChromiumDev (123.0.2380.1)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vite: ^5.0.10 => 5.0.10

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-azzv3z (Open reproduction)

[sapphi-red]

This is fixed by #18647