scholtz/qrcode-vue3

Breaking HMR in Nuxt 3

Opened this issue · 7 comments

Hey, really nice plugin but when I installed it on Nuxt 3 it breaks hot module reload.
Does anyone have any advice / managed to fix it?

replicated:

duplicated:

Environment

RootDir: /Users/k/vc/qrcode-hmr 10:47:49 PM
Nuxt project info: (copied to clipboard) 10:47:49 PM


  • Operating System: Darwin
  • Node Version: v18.16.0
  • Nuxt Version: 3.5.2
  • Nitro Version: 2.4.1
  • Package Manager: pnpm@8.6.0
  • Builder: vite
  • User Config: -
  • Runtime Modules: -
  • Build Modules: -

Reproduction

https://github.com/acidjazz/qrcode-hmr

Describe the bug

with the plugin running HMR breaks
turn the plugin off and HMR works fine

Additional context

I'm not sure if this is a bug in nuxt3 or qrcode-vue3 but thought i'd start here!

Logs

no issues, no errors, just broken HMR
pboos commented

Just experienced this as well. Sadly the whole project has no HMR once this is added as a component anywhere (even if not visible at that time).

Same here. Took me ages to figure out that this package was the culprit, and exactly how it was breaking the HMR. Here's a screenshot:

When we go from here to the place where we are supposed to look for instances of updated components:

Screenshot 2024-05-24 at 01 12 27

we suddenly find ourselves not in the place where those instances are stored (mapped), but in qrcode-vue3.js’s module, which knows nothing about them. I don’t know who is causing this unfortunate “rerouting,” but damn, it took me hours to track it down.

Not sure what to do next, I will probably copy and paste the key components/ts files directly into my app and use them from there.

It’s a drag because it really is a great component. I wonder if the culprit is in its vite config?

Update, I copied the entire src/ directory to my repo, and it works like magic, you only need to additionally install qrcode-generator.

Looks like this is not just a Nuxt issue. Even with just Vite app, it destroys the HMR. For some reason I uninstalled this component and tried a fork of this component "npm i qr-code-generator-vue3" and it did the trick. I did not even have to add the /src directory to my repo anymore.