core [runtime] styled-components loads twice without `shared.lib` specified, but Vite SPA breaks with it

Describe the bug

In my project, I have a remote that serves micro-frontends styled by styled-components, to multiple hosts SPAs in the organization with different bundlers (webpack, rspack and vite)

Lately, I've migrated the way that SPAs consume the remote MFs, from the build plugin, into a runtime approach. It worked great with Webpack, and RsPack bundlers, but I've encountered some issues while using MF Runtime + Vite as a bundler.

Passing lib to MF runtime init function, for the styled-components share module, completely breaks the Vite apps, while it works completely fine for RsPack and Webpack bundlers.

I've noticed that lib is required to be specified in order to properly load a single instance of the library. But I'm not able to do so with the Vite, so I end up with two instances of styled-components being fetched by the browser. Even though the versions match exactly between the host and remote, and the singleton: true option is enabled.

I have prepared a minimal reproduction repo: https://github.com/marcinkurka97/mf-runtime-vite to present the issue. It has following setup:

remote MF remote, bundled with @module-federation/[email protected]
host SPA which consumes MF via @module-federation/[email protected], bundled with Vite
host-rspack SPA which consumes MF via @module-federation/[email protected], bundled with RsPack

Reproduction steps

Run the following commands to run remote and both hosts

cd remote && npm i && npm run start
cd host && npm i && npm run start
cd host-rspack && npm i && npm run start

Open http://127.0.0.1:8082 with Vite SPA running 2.1. Check <head> section of the application and observe that two <style data-styled="active" data-styled-version="5.3.11"></style> tags were added 2.2. Check the Network tab and observe that both index.js and styled-components.browser.esm.js chunks loads the styled-components library 2.3. Try to adjust the shared['styled-components'] init MF config in: host/src/App.tsx by adding lib with the module
```
"styled-components": {
  version: pkg.dependencies["styled-components"],
  scope: "default",
+ lib: () => import("styled-components")
  shareConfig: {
    singleton: true, // changing this does not have any affect on the described issue
    requiredVersion: pkg.dependencies["styled-components"],
  },
},
```
2.4. The Vite app crashes, no matter how we would try to pass the value to lib ❌
Open http://127.0.0.1:8083 with RsPack SPA running 3.1. Check <head> section of the application and observe that two <style data-styled="active" data-styled-version="5.3.11"></style> tags were added 3.2. Check the Network tab and observe that both main.js and styled-components.browser.esm.js chunks loads the styled-components library 3.3. Try to adjust the shared['styled-components'] init MF config in: host-rspack/src/App.tsx by adding lib with the module
```
"styled-components": {
  version: pkg.dependencies["styled-components"],
  scope: "default",
+ lib: () => import("styled-components")
  shareConfig: {
    singleton: true, // changing this does not have any affect on the described issue
    requiredVersion: pkg.dependencies["styled-components"],
  },
},
```
3.4. The Rspack works correctly, and the styled-components are loaded once (check <head> and Network) ✅

Summary

There seem to be two issues: 1.@module-federation/runtime loads the styled-components module twice, unless we pass lib to its shared configuration. 2. Passing lib to shared config while using Vite bundler breaks the app, while it works fine with RsPack

Reproduction

https://github.com/marcinkurka97/mf-runtime-vite

Used Package Manager

npm

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 84.69 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.14.0 - ~/.nvm/versions/node/v20.14.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.14.0/bin/npm
  Browsers:
    Chrome: 132.0.6834.111
    Safari: 17.4.1

Validations

[x] Read the docs.
[x] Read the common issues list.
[x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[x] Make sure this is a Module federation issue and not a framework-specific issue.
[x] The provided reproduction is a minimal reproducible example of the bug.

Jan 30 '25 14:01 marcinkurka97

file issue with vite plugin repo, not a issue of core library

Feb 05 '25 21:02 ScriptedAlchemy

Dear @ScriptedAlchemy, can you at least explain the behavior of lib property in @module-federation/runtime? Why is it needed in order for the package to be properly shared between the host and remote? It's something specific for the runtime MF because the bundler plugins do not have such an option right?

And to the Vite issue. The problem is not with @module-federation/vite, but the Vite bundler itself. It seems that the runtime MF plugin does not work well with it (at least in terms of sharing the styled-components)

Feb 06 '25 07:02 marcinkurka97

Dear @ScriptedAlchemy, I've updated my reproduction repository to highlight that there is no problem with REMOTE, the problem is with HOST.

I've added a remote in RsPack, the host is still in Vite - and the same problem appears.

Reproduction steps:

cd remote-rspack && npm i && npm run start
cd host && npm i && npm run start
open http://localhost:4173/ with Vite host - no errors, but two instances of styled-components are loaded
Try to adjust the shared['styled-components'] init MF config in: host/src/App.tsx by adding lib with the module

"styled-components": {
  version: pkg.dependencies["styled-components"],
  scope: "default",
+ lib: () => import("styled-components")
  shareConfig: {
    singleton: true, // changing this does not have any affect on the described issue
    requiredVersion: pkg.dependencies["styled-components"],
  },
},

The Vite app crashes, no matter how we would try to pass the value to lib ❌

As you can see, it doesn't matter how the remote is bundled. The problem is with the Vite host, and how it works with MF Runtime module sharing.

Feb 18 '25 10:02 marcinkurka97

try it with webpack / rspack only and see if it works, if it does - then its a vite issue

Feb 25 '25 02:02 ScriptedAlchemy

As described in the main issue, the problem only occurs on VITE bundler.

When the host is built with RsPack the problem does not appear.

And If I would raise the issue in vite github, they will say the same thing as you... "it's not our problem, it's MF Runtime problem"

Feb 26 '25 11:02 marcinkurka97

Can't be runtime issue if the runtime works... try the module-federation/vite repo. We don't maintain vite implementations, only *pack and runtime

Feb 27 '25 08:02 ScriptedAlchemy

Stale issue message

Apr 28 '25 15:04 github-actions[bot]