Hash generated(for HMR) from relative path name is not unique in a microfrontend architecture

[svihpinc]

The hash is generated in this line of code: https://github.com/vuejs/vue-loader/blob/8357e071c45e77de0889a9feedf2079a327f69d4/src/index.ts#L142.

This hash is generated using the relative path of the file being considered. But, in a microfrontend architecture, eg: when using single-spa. Different parcels and applications, if loaded at the same time may be built using different webpack configs, but use the same Vue instance. This is causing duplicate hashes being registered to the same Vue instance, since the relative path remains the same (eg: parcel1/src/App.vue, app1/src/App.vue, parcel2/src/App.vue` all will have the same HMR id)

This is causing issues like:

• app1's App.vue gets mounted by calling createApp().mount
• app1 now tries to mount parcel1 dynamically, by importing it's main.js(this file then will call the createApp().mount with parcel1's App.vue)
• on import, Vue's HMR thinks that parcel1's App.vue is the same as app1's App.vue.
• parcel1's App.vue gets mounted in place of app1's App.vue

In the above scenario, createApp().mount was never called with parcel1's App.vue, and still it gets mounted

Possible solutions:

1. use the absolute path of the file being considered, by just replacing path.relative with path.resolve, since generally the absolute paths of different microfrontends are different (are located in different folders)
2. give users an option to give a suffix/prefix to the string that is used to create the hash