Two instances of checker plugin on the same page doesn't work

[alexandersorokin]

Describe the bug

I develop widgets that use different Vite configs to serve them. I test the widgets simultaneously on a single html page that is served by another Vite instance. In such scenario in dev mode a single tab of the browser is connected to several Vite instances.

Almost everything works fine except vite-plugin-checker. The first checker plugin instance loads and works correctly, but subsequent instances fail to show an overlay.

Reproduction

1. Create two separate Vite applications with the checker plugin.
2. Convert one of them to lib mode.
3. Use dynamic import to connect the lib Vite application to the regular one.
4. Connect vite-plugin-checker-runtime-entry of lib Vite application to regular one.

Expected behavior

Both instances of the checker plugin on the same page show overlay if there are an error.

System Info

"vite-plugin-checker": "0.6.1" or "vite-plugin-checker": "0.6.4"

Additional context

It's because the defined web component of each checker instance has the same name 'vite-plugin-checker-error-overlay'. So the instances have conflicts. As a result second ShadowElement is never registered. And calling constructor const overlayEle = new ShadowElement({ results in 'Illegal constructor.: TypeError VueElement.

Proposal: to make web component name unique at runtime. Or to use already defined custom element if it is defined.

It isn't possible to use a single checker-plugin for all widgets as their Vite configs are very different.
It isn't a solution to define a static web component name in the checker plugin configuration as the same widget can be loaded and unloaded on the same html page several times.

I am eager to bring MR to fix it.

What do you think about that?

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.