Shared dependencies are loaded multiple times

[Artur-]

Versions

• vite-plugin-federation: main branch
• vite: from main branch

Reproduction and Steps to reproduce

https://github.com/Artur-/vite-plugin-federation/pull/1/files contains a modified version of the "basic-host-remote" example that uses <vaadin-button> instead of <button>.

Running it causes an error because the shared JS is loaded twice instead of once

What is Expected?

vaadin-button depends on Polymer and other mixins that have global side effects when loading, e.g. Polymer defines a custom element called dom-element. If Polymer is loaded twice, then both copies will try to define the custom element and an exception will occur.

When using a shared module, as far as I understand, the module is supposed to be loaded once to avoid this issue and enable using <vaadin-button> in both the host and all remotes.

What is actually happening?

First vaadin button js is loaded from http://localhost:5000/dist/_federation_shared@vaadinButton.js i.e. the host URL and then the same shared vaadin button js is loaded from http://localhost:5001/_federation_shared@vaadinButton.js and the exception occurs. In this example case the exception is

caught (in promise) DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-lumo-styles" has already been used with this registry

which comes from loading @vaadin/vaadin-lumo-styles/version.js twice (a dependency of vaadin-button)

[Artur-]

This shows a similar setup with the webpack federation plugin. There the shared dependency is loaded only once https://stackblitz.com/edit/github-ty2g8r-nhlrmk

[midhunadarvin]

Hi @Artur-

The singleton property is removed in latest version of this package.

I am trying to use a child React application in a host React application. The shared react dependency is loaded twice.

[AsuraKev]

Same issue here, this issue pretty much makes this plugin unusable :(

[mariojfduarte]

any reason why?

[skypyxis]

Any development about this? If we can't make a library singleton this plugin doesn't meet our needs.

[AsuraKev]

Downgrade to version 1.1.14 and it works, guess the 1.2.x is broken

[swalker326]

v1.1.9 is the version that it was commented out in, so 1.1.8 is the one to use if you still want singleton. I'm not sure why it was commented out.

https://github.com/originjs/vite-plugin-federation/commit/0d095ba5efe49ef951a0ad302c32292a2271adfa

edit: just to be clear when trying to run v1.1.8 I had several other issues with compatibility. Will try to look at this weekend to see if I can get it implemented again.

[simonbergstrom]

Following this issue with interest. Also needs the singleton flag for my shared deps.

[trickpattyFH20]

I solved the issue of seeing multiple shared react instances by changing how I configured @vitejs/plugin-react

Instead of using the automatic JSX runtime, I used classic:

// vite.config.js
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({ jsxRuntime: 'classic' }),
  ]
});

To my understanding, the new automatic JSX runtime wraps each component with some call to React, and I'm guessing this doesn't play well with @originjs/vite-plugin-federation.

All of my other shared dependencies seem to successfully use singletons by default, unless there is a version mismatch.

@simonbergstrom @AsuraKev @midhunadarvin

It would be great if someone could find a way to support singletons again, including the new JSX runtime @ruleeeer @flyfishzy @Adolph-WSY