search

scholtz / qrcode-vue3

MIT License
80 stars 29 forks source link

Breaking HMR in Nuxt 3 #42

Open razchen opened 6 months ago

razchen commented 6 months ago

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 commented 6 months ago

https://github.com/nuxt/nuxt/issues/21273 related

acidjazz commented 6 months ago

replicated:

duplicated:

Environment

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

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 commented 6 months ago

stackblitz link.

pboos commented 5 months ago

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 commented 1 month ago

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?

vzakharov commented 1 month ago

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

rockycastaneda commented 2 weeks ago

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.