Subscribe on changes!

HMR stops if mixin is used

avatar
Jul 22nd 2021

Version

3.2.0-beta.4

Reproduction link

https://github.com/PeterAlfredLee/vue3_hmr_stop

Steps to reproduce

  1. Visit http://localhost:8080/
  2. Check the console output
  3. Change the console.log value in created of src/App.vue
  4. Check the console output
  5. Remove the app.mixin({}) in src/main.js
  6. Check the console output
  7. Change the console.log value in created of src/App.vue
  8. Check the console output

What is expected?

HMR will work and the console log output could be auto updated

What is actually happening?

With the mixin called, the HMR stops and the console log is not auto updated


I found this issue in vue-i18n that reports HMR stops. After some investigation, I found this problem was caused by call of mixin in vue, and it's introduced in version 3.1.0-beta.7.

I think the problem is caused by this :

    resolved = {}
    if (globalMixins.length) {
      globalMixins.forEach(m =>
        mergeOptions(resolved, m, optionMergeStrategies, true)
      )
    }
    mergeOptions(resolved, base, optionMergeStrategies)

The resolved was assigned with a new object and was mixined with globalMixins and base. Therefore the change of base will not influence the actual working var resolved.

I fixed this with simply some simple code change :

    resolved = base
    if (globalMixins.length) {
      globalMixins.forEach(m =>
        mergeOptions(resolved, m, optionMergeStrategies, true)
      )
    }

Hope this helps.