vite-plugin-checker icon indicating copy to clipboard operation
vite-plugin-checker copied to clipboard

vite-plugin-checker-error-overlay custom element is shown as a separate root component in Vue Devtools

Open jiikoosol opened this issue 1 year ago • 6 comments

Describe the bug

I'm not entirely sure if this is a bug or intended to be like this, but after upgrading vite-plugin-checker to version 0.9.0 I started seeing the custom element "vite-plugin-checker-error-overlay" in Vue Devtools as a separate root component. When developing, if you have to refresh the page several times, you also have to select the right component from Devtools, instead of the component being developed being directly visible in the tool, as it normally is. This causes multiple extra clicks which is really frustrating.

Tested with following Vue & Vite versions:

"vue": "^3.5.13",   
"vite": "^6.2.0"

Reproduction

  1. Update vite-plugin-checker to version 0.9.0
  2. Start your application and open Vue devtools
  3. See that there's a "VueElement" root component shown in "Components" tab

Image Image

Expected behavior

Vue Devtools should ignore the vite-plugin-checker-error-overlay component as in version 0.8.0:

Image

System Info

System:
    OS: macOS 15.3.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 548.77 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
  Browsers:
    Chrome: 133.0.6943.142
    Safari: 18.3
  npmPackages:
    vite-plugin-checker: ^0.9.0 => 0.9.0

Additional context

No response

Validations

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

jiikoosol avatar Mar 03 '25 07:03 jiikoosol

I think its intended like this @jiikoosol as vite-plugin-checker will mount the overlay as a separate component into your DOM. You can always disable the overlay in the settings and use the console output only.

jhoermann avatar Mar 06 '25 08:03 jhoermann

I've also encountered this issue. If this is intentional, I hope an option can be provided to disable it, or a way to prevent it from showing in Vue DevTools can be shared. This undoubtedly increases the number of clicks for frequent Vue DevTools users.

Nathan7139 avatar Jun 04 '25 08:06 Nathan7139

My workflow has been impacted negatively by this, along with my colleagues. It would be nice to have a way to disable it from showing in Vue DevTools.

jtilford avatar Jun 19 '25 15:06 jtilford

I also have this issue and it is rather annoying. If anything, could the entry be made to show later than any other Vue instances in the list? Right now it is defaulting to showing the plugin first; it would be better if the plugin were last in that list...

tryforceful avatar Aug 10 '25 15:08 tryforceful