Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(client): overlay not appearing when multiple vite clients were loaded #18647

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

seokju-na
Copy link

Description

Vite is creating a custom elemtn with <vite-error-overlay> to display error overlay.

If the vite client is loaded multiple times (e.g. in the case of Micro-Frontend architecture), there is an issue while creating error overlay from second vite client because creating custom element without defining into custom elements registry causes error. (below screenshot is error from chrome browser)

screenshot

src/client/overlay.ts:

export const overlayId = 'vite-error-overlay'
const { customElements } = globalThis // Ensure `customElements` is defined before the next line.
if (customElements && !customElements.get(overlayId)) {
  customElements.define(overlayId, ErrorOverlay)
}

Fix this by get the constructor of ErrorOverlay from custom element registry if already defined.

Although it may not be the expected behavior for the vite client to be loaded multiple times, this PR will be helpful as there are cases where the ErrorOverlay singleton cannot be guaranteed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant