Breaking HMR in Nuxt 3

[razchen]

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?

[acidjazz]

nuxt/nuxt#21273 related

[acidjazz]

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: [email protected]
• 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

[acidjazz]

stackblitz link.

[pboos]

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).

[vzakharov]

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:

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?

[vzakharov]

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

[rockycastaneda]

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.