developit / developit/mitt

Vite HMR stops working when subscribing to events in Vue 3 components when mitt is bundled in another package

オープン
#207 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
11.9k
フォーク
488
PR マージ指標
30日以内にマージされた PR はありません

説明

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.

- [Link to package](https://www.npmjs.com/package/mitt-vue)

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!

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

mitt-vue 2.1.0を使用するVue 3 + Viteプロジェクトで問題を再現し、その後、ローカルのsrc/lib/mitt-vue.jsのコピーとパッケージのCommonJSビルドを比較します。まずuseEventEmit、useEventListener、Viteの設定から始め、コンポーネントの編集によって手動の更新なしに目に見えるHMR更新が発生することを確認します。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript, vite
領域
build-system, frontend, tooling
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。