Using the mitt-library in Vue with Webpack hot-reload causes problems?

Solution 1:

It looks like your component is missing a corresponding off() call to remove the event listener. During hot reload, the current component instances unmount, and new ones mount; so if you're not removing current event listeners, you'll just pile on new event listeners. To resolve the issue, use the onUnmounted hook to remove the event listener when the component is removed from the DOM.

Also, make sure to pass cached function references (instead of inline functions) to mitt.on() and mitt.off() to ensure the given event listener lookup succeeds in mitt.off():

// mitt.on('list_refresh', () => refresh()) ❌

mitt.on('list_refresh', refresh) ✅
mitt.off('list_refresh', refresh)

Your setup() should look similar to this:

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const refresh = () => { /*...*/ }

    onMounted(() => mitt.on('list_refresh', refresh))
    onUnmounted(() => mitt.off('list_refresh', refresh)) 👈
  }
}