2 copies of Vue

[mscolnick]

Per this doc: https://single-spa.js.org/docs/ecosystem-vite/

..if you are doing an import map override for a Vite application on a page that also uses SystemJS, you may end up with multiple instances of Vue (and other shared libraries), which is different than how things will work in production. This is generally okay, except for situations where the Vue instance is modified via Vue.use().

Is there a way to get around this? This breaks a bit more with multiple copies of React.

[joeldenning]

Yes, please read https://single-spa.js.org/docs/ecosystem-vite#native-modules-vs-systemjs. The problem only occurs if you have two in-browser module registries that don't overlap/share their modules. SystemJS is one module registry and native modules use the browser's native module registry.

To only have one copy of Vue or React, you have the following options:

1. For all microfrontends, only use SystemJS (not native modules) for both development and production. This is possible for production as documented in the single-spa docs. For development I don't know if it's possible, but imagine it might be via ViteJS plugins.
2. For all microfrontends, only use native modules (not systemjs) for both development and production. This is often not an option because of browser support for modules and import maps, along with webpack not supporting externals when libraryTarget is module. However, it does solve the dependency problem.
3. For all microfrontends, only use native modules in development, but systemjs in production.
4. Load the shared dependencies as native modules, but then also insert them into the SystemJS module registry. The documentation I linked to shares a link to https://github.com/systemjs/systemjs/pull/2187 which shows how this can be done.

[zeyuri]

Sorry to reoopen this, but this extra code would work with importmao overrides?