Open joeldenning opened 3 years ago
One other thing to note, webpack deals with similar collision issues with its webpackJsonp
function, and in webpack 5 they chose to use the package.json name of the main project to namespace the webpackJsonp
functions. So there is a bit of precedent for using the package.json name to avoid these kinds of collisions.
Can anyone help to look at this? This is important for adopting vue3 for any micro-frontend architecture. And it also brings the concern of style leakage because of the id collision between different apps.
I have same problem. I renamed the files on my projects,but i need to integrate frontend not developed by me. Where are a different solution?
As @rickypast82 says renaming the file works, but it's just a workaround. We need an actual solution for this. In Vue 2 this was not happening...
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 https://github.com/single-spa/single-spa/issues/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.