search

vuejs / vue-loader

📦 Webpack loader for Vue.js components
MIT License
4.99k stars 915 forks source link

Namespace module ids for different projects #1767

Open joeldenning opened 3 years ago

joeldenning commented 3 years ago

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.

joeldenning commented 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.

pionxzh commented 3 years ago

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.

rickypast82 commented 2 years ago

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?

lorenzo-dainelli commented 2 years ago

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...