[@vitejs/plugin-vue] When using the same Vue component in "popup" and "content UI", modifying the Vue component content will crash the popup after hot update.

[xbears]

Describe the bug

When using the same Vue component in "popup" and "content UI", modifying the Vue component content will crash the popup after hot update.

To Reproduce

wxt-demo.zip

1. Install package pnpm install
2. Run wxt pnpm run dev
3. Modify component content HelloWorld.vue
4. Inspect popups for error messages

Screenshots

Environment

  System:
    OS: Windows 11 10.0.23601
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 17.65 GB / 31.93 GB
  Binaries:
    Node: 20.6.1 - C:\soft\nodejs\node.EXE
    npm: 9.8.1 - C:\soft\nodejs\npm.CMD
    pnpm: 8.12.0 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (120.0.2210.61)
    Internet Explorer: 11.0.23601.1000

[aklinker1]

@xbears Thanks for sharing! I could not reproduce the error with your ZIP on Mac, I'll give it a go on windows later today.

Video

small.mp4

In the meantime, could you re-upload the reproduction with the lockfile? Including lockfiles is important so maintainers have the exact set of dependencies you had while creating the reproduction. It also tells us which package manager was being used, which is also important to reproducing some errors (here I guessed PNPM because of the .npmrc file).

If this isn't a Windows-only issue, my guess is it was an issue with Vite 5 that's been fixed. Although, I don't kno because I don't have your lockfile.

I was using vite@5.0.7 when attempting to reproduce.

[xbears]

wxt-demo-with-lockfile.zip

Thanks for your reply, I tested it using a mac and it still reproduces, see the video below, I attached the zip with the lock, also the version of Vite it uses is 5.0.7 the latest version.

---

update:
I tested and found that only modifying <template> content to trigger a hot update triggers this issue. If <script> content is modified first, there is no problem after that.

Video

Screen.Recording.2023-12-12.mp4

[aklinker1]

I was able to reproduce, and this does only happen if re-using the component between entrypoints. Specifically, between a content script and HTML page. Doesn't happen between multiple UIs and doesn't happen between multiple content scripts.

Something weird must be going on between the HTML's HMR and the content script's bundling. Maybe they're getting combined somehow? They should be completely separate.

[DaPotatoMan]

@aklinker1 I'm not sure if this helpful but it could be similar to this issue nuxt-modules/storybook#428 (comment)

This looks to me like @vitejs/plugin-vue might be injected twice (and therefore transforming components twice).

[aklinker1]

@DaPotatoMan thanks for sharing. I've seen that before, but if I inspect the plugins, there's only 1 vue plugin per vite build or vite dev. I think instead, the problem is the mixing of dev and build modes.

I think the solution might be to use the SSR tools vite provides to render the other files rather than using vite build, but I don't know if vite can SSR a JS file (like content scripts or the background), I think it's just for HTML. Need to look into it more.