Version

16.1.1

Reproduction link

https://github.com/joeldenning/vue-loader-hmr-bug

Steps to reproduce

The steps are in the README of the Github repo.

What is expected?

Both apps will mount.

What is actually happening?

One of the apps is mounted twice, and the other is not mounted at all. Turning off HMR works around the bug.

The microfrontends community often runs multiple Vue CLI projects in a single web app. I help maintain single-spa and this was originally reported to me in single-spa/single-spa#672.

This bug occurs because vue-loader generates the same module id for files in different projects. Since both app1 and app2 have src/App.vue files, they have the same module ids.

See this code which shows that the module id is based entirely on the relative file path of the vue component. Since Vue CLI scaffolds projects with the same file paths, this results in collisions.

Proposed fix:

Namespace the module ids based on the package.json name, current working directory, or some other field that vue-loader already has available to it. This would ensure that src/App.vue would result in a different module id in two different projects. I'm happy to put together a fix for this, but am unsure what would be best to use as the namespace. Am leaning towards package.json name.