fix(client): overlay not appearing when multiple vite clients were loaded by seokju-na · Pull Request #18647 · vitejs/vite

seokju-na · 2024-11-12T12:13:07Z

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)

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.

sapphi-red · 2024-11-19T06:30:20Z

refs #4475

sapphi-red

Ideally, we should register a different custom element for each Vite server (or version). Because this code would break if Vite changes the interface of ErrorOverlay in future.
But I don't think that's a blocker as I guess micro frontends has been kind a community supported (non-official) feature.

packages/vite/src/client/client.ts

| datasource | package | from | to | | ---------- | ------- | ------ | ----- | | npm | vite | 5.4.11 | 6.0.1 | ## [v6.0.1](https://github.com/vitejs/vite/blob/HEAD/packages/vite/CHANGELOG.md#small601-2024-11-27-small) - fix: default empty server `proxy` prevents starting http2 server ([#18788](vitejs/vite#18788)) ([bbaf514](vitejs/vite@bbaf514)), closes [#18788](vitejs/vite#18788) - fix(manifest): do not override existing js manifest entry ([#18776](vitejs/vite#18776)) ([3b0837e](vitejs/vite@3b0837e)), closes [#18776](vitejs/vite#18776) - fix(server): close \_ssrCompatModuleRunner on server close ([#18784](vitejs/vite#18784)) ([9b4c410](vitejs/vite@9b4c410)), closes [#18784](vitejs/vite#18784) - fix(server): skip hot channel client normalization for wsServer ([#18782](vitejs/vite#18782)) ([cc7670a](vitejs/vite@cc7670a)), closes [#18782](vitejs/vite#18782) - fix(worker): fix `applyToEnvironment` hooks on worker build ([#18793](vitejs/vite#18793)) ([0c6cdb0](vitejs/vite@0c6cdb0)), closes [#18793](vitejs/vite#18793) - chore: flat v6 config file ([#18777](vitejs/vite#18777)) ([c7b3308](vitejs/vite@c7b3308)), closes [#18777](vitejs/vite#18777) - chore: split changelog ([#18787](vitejs/vite#18787)) ([8542632](vitejs/vite@8542632)), closes [#18787](vitejs/vite#18787) - chore: update changelog for v6 ([#18773](vitejs/vite#18773)) ([b254fac](vitejs/vite@b254fac)), closes [#18773](vitejs/vite#18773) - revert: update moduleResolution value casing ([#18409](vitejs/vite#18409)) ([#18774](vitejs/vite#18774)) ([b0fc6e3](vitejs/vite@b0fc6e3)), closes [#18409](vitejs/vite#18409) [#18774](vitejs/vite#18774) ## [v6.0.0](https://github.com/vitejs/vite/blob/HEAD/packages/vite/CHANGELOG.md#600-2024-11-26) - fix: `createRunnableDevEnvironment` returns `RunnableDevEnvironment`, not `DevEnvironment` ([#18673](vitejs/vite#18673)) ([74221c3](vitejs/vite@74221c3)), closes [#18673](vitejs/vite#18673) - fix: `getModulesByFile` should return a `serverModule` ([#18715](vitejs/vite#18715)) ([b80d5ec](vitejs/vite@b80d5ec)), closes [#18715](vitejs/vite#18715) - fix: catch error in full reload handler ([#18713](vitejs/vite#18713)) ([a10e741](vitejs/vite@a10e741)), closes [#18713](vitejs/vite#18713) - fix: display pre-transform error details ([#18764](vitejs/vite#18764)) ([554f45f](vitejs/vite@554f45f)), closes [#18764](vitejs/vite#18764) - fix: exit code on `SIGTERM` ([#18741](vitejs/vite#18741)) ([cc55e36](vitejs/vite@cc55e36)), closes [#18741](vitejs/vite#18741) - fix: expose missing `InterceptorOptions` type ([#18766](vitejs/vite#18766)) ([6252c60](vitejs/vite@6252c60)), closes [#18766](vitejs/vite#18766) - fix: log error when send in module runner failed ([#18753](vitejs/vite#18753)) ([ba821bb](vitejs/vite@ba821bb)), closes [#18753](vitejs/vite#18753) - fix(client): overlay not appearing when multiple vite clients were loaded ([#18647](vitejs/vite#18647)) ([27d70b5](vitejs/vite@27d70b5)), closes [#18647](vitejs/vite#18647) - fix(deps): update all non-major dependencies ([#18691](vitejs/vite#18691)) ([f005461](vitejs/vite@f005461)), closes [#18691](vitejs/vite#18691) - fix(html): fix inline proxy modules invalidation ([#18696](vitejs/vite#18696)) ([8ab04b7](vitejs/vite@8ab04b7)), closes [#18696](vitejs/vite#18696) - fix(module-runner): make evaluator optional ([#18672](vitejs/vite#18672)) ([fd1283f](vitejs/vite@fd1283f)), closes [#18672](vitejs/vite#18672) - fix(optimizer): detect npm / yarn / pnpm dependency changes correctly ([#17336](vitejs/vite#17336)) ([#18560](vitejs/vite#18560)) ([818cf3e](vitejs/vite@818cf3e)), closes [#17336](vitejs/vite#17336) [#18560](vitejs/vite#18560) - fix(optimizer): trigger onCrawlEnd after manual included deps are registered ([#18733](vitejs/vite#18733)) ([dc60410](vitejs/vite@dc60410)), closes [#18733](vitejs/vite#18733) - fix(optimizer): workaround firefox's false warning for no sources source map ([#18665](vitejs/vite#18665)) ([473424e](vitejs/vite@473424e)), closes [#18665](vitejs/vite#18665) - fix(ssr): replace `__vite_ssr_identity__` with `(0, ...)` and inject `;` between statements ([#18748](vitejs/vite#18748)) ([94546be](vitejs/vite@94546be)), closes [#18748](vitejs/vite#18748) - chore: add 5.4.x changelogs ([#18768](vitejs/vite#18768)) ([26b58c8](vitejs/vite@26b58c8)), closes [#18768](vitejs/vite#18768) - chore: add some comments about mimes ([#18705](vitejs/vite#18705)) ([f07e9b9](vitejs/vite@f07e9b9)), closes [#18705](vitejs/vite#18705) - chore(deps): update all non-major dependencies ([#18746](vitejs/vite#18746)) ([0ad16e9](vitejs/vite@0ad16e9)), closes [#18746](vitejs/vite#18746) - perf: reduce bundle size for `Object.keys(import.meta.glob(...))` / \`Object.values(import.meta.glob( ([ed99a2c](vitejs/vite@ed99a2c)), closes [#18666](vitejs/vite#18666) - perf(worker): inline worker without base64 ([#18752](vitejs/vite#18752)) ([90c66c9](vitejs/vite@90c66c9)), closes [#18752](vitejs/vite#18752) - feat: add support for .cur type ([#18680](vitejs/vite#18680)) ([5ec9eed](vitejs/vite@5ec9eed)), closes [#18680](vitejs/vite#18680) - feat: enable HMR by default on ModuleRunner side ([#18749](vitejs/vite#18749)) ([4d2abc7](vitejs/vite@4d2abc7)), closes [#18749](vitejs/vite#18749) - feat: support `module-sync` condition when loading config if enabled ([#18650](vitejs/vite#18650)) ([cf5028d](vitejs/vite@cf5028d)), closes [#18650](vitejs/vite#18650) - feat!: drop node 21 support in version ranges ([#18729](vitejs/vite#18729)) ([a384d8f](vitejs/vite@a384d8f)), closes [#18729](vitejs/vite#18729) - fix(deps)!: update dependency dotenv-expand to v12 ([#18697](vitejs/vite#18697)) ([0c658de](vitejs/vite@0c658de)), closes [#18697](vitejs/vite#18697) - docs: rename `HotUpdateContext` to `HotUpdateOptions` ([#18718](vitejs/vite#18718)) ([824c347](vitejs/vite@824c347)), closes [#18718](vitejs/vite#18718) - test: simplify `playground/json/__tests__/ssr` ([#18701](vitejs/vite#18701)) ([f731ca2](vitejs/vite@f731ca2)), closes [#18701](vitejs/vite#18701) - refactor: first character judgment replacement regexp ([#18658](vitejs/vite#18658)) ([58f1df3](vitejs/vite@58f1df3)), closes [#18658](vitejs/vite#18658)

…aded (vitejs#18647)

seokju-na added 2 commits November 12, 2024 15:22

fix overlay not appearing when multiple vite clients were loaded

a8cf0de

fix

4ac57e6

sapphi-red reviewed Nov 19, 2024

View reviewed changes

packages/vite/src/client/client.ts Outdated Show resolved Hide resolved

sapphi-red added the p2-edge-case Bug, but has workaround or limited in scope (priority) label Nov 19, 2024

apply review

df14baa

sapphi-red approved these changes Nov 21, 2024

View reviewed changes

bluwy approved these changes Nov 21, 2024

View reviewed changes

bluwy merged commit 27d70b5 into vitejs:main Nov 21, 2024

seokju-na deleted the reuse-error-overlay branch November 22, 2024 11:39

sapphi-red mentioned this pull request Feb 10, 2025

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

Closed

7 tasks

moonlitusun pushed a commit to moonlitusun/vite that referenced this pull request May 25, 2025

fix(client): overlay not appearing when multiple vite clients were lo…

34902cf

…aded (vitejs#18647)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

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

fix(client): overlay not appearing when multiple vite clients were loaded#18647
bluwy merged 3 commits intovitejs:mainfrom
seokju-na:reuse-error-overlay

seokju-na commented Nov 12, 2024

Uh oh!

sapphi-red commented Nov 19, 2024

Uh oh!

sapphi-red left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Comments

Conversation

seokju-na commented Nov 12, 2024

Description

Uh oh!

sapphi-red commented Nov 19, 2024

Uh oh!

sapphi-red left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sapphi-red left a comment •

edited

Loading