customElement register error

[agileago]

Describe the bug

when i mixin multiple vite project in one vite project(micro frontend). customElements overlay register will reregister and error

Reproduction

https://github.com/agileago/vite-mfe

vite/packages/vite/src/client/overlay.ts

Lines 184 to 185 in 3df736b

	export const overlayId = 'vite-error-overlay'
	customElements.define(overlayId, ErrorOverlay)

System Info

chrome

Used Package Manager

yarn

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 https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[agileago]

maybe we could add conditional when register

if (!customElements.get(overlayId)) {
  customElements.define(overlayId, ErrorOverlay);
}

[higuaifan]

I create a discussions a few days ago: #3911...
but nobody answered...

wish this issue can change something...

[patak-dev]

maybe we could add conditional when register

if (!customElements.get(overlayId)) {
  customElements.define(overlayId, ErrorOverlay);
}

This sounds good. Would you like to create a PR @agileago? We should check if this is enough, and all the micro frontends are able to use the first registered one, but it seems that it will be fine to me

[sionzee]

I think you are fixing wrong issue here. You are loading @vite/client twice, rather than adding a condition we should prevent loading it twice.
#4023

[agileago]

@patak-js someone has done. please check it. thanks @webfansplz

[patak-dev]

We should first resolve the comment from @sionzee to justify the need for this check

[sionzee]

@agileago I have got an email with your removed message. It is a good practice to strikethrough the text rather than removing it completely.

Anyway, we are on the same side. We too uses two vite applications but the vite client is being injected by the code during import. Unfortunately nothing which could be somehow prevented without touching vite source code.

Using the workaround mentioned in the example above could run into next issues for e.g.: triggering hot updates twice, and soo on. That's because all vite handling will be there twice and more times if using more applications.

[sionzee]

@patak-js in my opinion Vite shouldn't inject the client whatever is happening. Developer is responsible for adding the client import to the page. I believe by removing the auto injection it will resolve this and other similar issues. The docs also doesn't mention the auto injection so it behaves as a bug. If it must stay there due compatibility then adding an option to turn it off will be really welcomed.

[patak-dev]

Vite shouldn't be auto injecting in this case, but maybe there is an issue with the setup of the OP

[github-actions]

Hello @agileago. Please provide a minimal reproduction using a GitHub repository or codesandbox. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[sionzee]

@patak-js Sounds like tree-shaking is not working here:
https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts#L286

This line is served to browser and it tries to import client.mjs

where the:

const overlayId = 'vite-error-overlay';
customElements.define(overlayId, ErrorOverlay);

is being called.

In my scenario the client.mjs is included by .vue file (will update soon with more details)

Here you can see the client is called from EditorView.vue, and first line in EditorView.vue is: (added by vite)

import { createHotContext as __vite__createHotContext } from "/editor/esm/@vite/client";import.meta.hot = __vite__createHotContext("/src/vue/EditorView.vue")

That is another link to @vite/client.

---

I have tried to remove both references for the @vite/client and the error is not happening anymore.

[agileago]

@patak-js https://github.com/agileago/vite-mfe