You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I’m encountering an issue where Hot Module Replacement (HMR) stops working when using the functions useEventEmit or useEventListener from mitt-vue in my Vue 3 project.
mitt-vue is a package that bundles event subscription and unsubscription in the onMounted and onUnmounted Vue lifecycles so developers don't have to code it every single time they want a component to listen to events.
The issue doesn't occur when I replicate mitt-vue locally by copying the contents of the package into my project. It works fine in that case, and HMR functions normally. However, when importing and invoking useEventEmit or useEventListener directly from mitt-vue, HMR ceases to update the components as expected.
Here’s a quick summary of the setup and the steps to reproduce the issue:
Steps to Reproduce:
Install mitt-vue in a Vue 3 + Vite project.
Import and use the functions useEventEmit and useEventListener in any Vue component.
Modify any component or file (e.g., .vue or .ts) and observe that HMR stops updating the component properly or even the whole application.
Expected Behavior:
HMR should update the Vue components live without the need to manually refresh the page, even when using mitt-vue functions.
Actual Behavior:
HMR stops working, and changes to Vue components or other files don't trigger the automatic update in the browser. However, the Vite logs indicate that the component is being updated, but the screen does not reflect the change.
Environment:
Vite Version: 6.0.11 (also failing in 5.X.X)
Vue Version: 3.5.13
mitt-vue Version: 2.1.0
OS: macOS / Linux / Windows
Node.js Version: 18.19.0 (also failing in 20.X.X)
Additional Notes:
Local Reimplementation: When I locally replicate the contents of mitt-vue in my project (i.e., copying the mitt-vue.js file into src/lib/), HMR works perfectly.
I’ve tried resolving the issue by aliasing the package in Vite config, but it still doesn’t work when invoking useEventEmit or useEventListener.
I suspect the issue might be related to how Vite handles HMR with packages that are treated as external dependencies, particularly with how mitt-vue is structured (using require in its CommonJS build). Any guidance or fixes would be greatly appreciated!
The text was updated successfully, but these errors were encountered:
I’m encountering an issue where Hot Module Replacement (HMR) stops working when using the functions
useEventEmit
oruseEventListener
from mitt-vue in my Vue 3 project.mitt-vue is a package that bundles event subscription and unsubscription in the onMounted and onUnmounted Vue lifecycles so developers don't have to code it every single time they want a component to listen to events.
The issue doesn't occur when I replicate
mitt-vue
locally by copying the contents of the package into my project. It works fine in that case, and HMR functions normally. However, when importing and invokinguseEventEmit
oruseEventListener
directly frommitt-vue
, HMR ceases to update the components as expected.Here’s a quick summary of the setup and the steps to reproduce the issue:
Steps to Reproduce:
mitt-vue
in a Vue 3 + Vite project.useEventEmit
anduseEventListener
in any Vue component.Expected Behavior:
HMR should update the Vue components live without the need to manually refresh the page, even when using mitt-vue functions.
Actual Behavior:
HMR stops working, and changes to Vue components or other files don't trigger the automatic update in the browser. However, the Vite logs indicate that the component is being updated, but the screen does not reflect the change.
Environment:
Additional Notes:
useEventEmit
oruseEventListener
.mitt-vue
is structured (using require in its CommonJS build). Any guidance or fixes would be greatly appreciated!The text was updated successfully, but these errors were encountered: