Description
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:
remoteMF remote, bundled with@module-federation/[email protected]hostSPA which consumes MF via@module-federation/[email protected], bundled with Vitehost-rspackSPA 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:8082with 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 bothindex.jsandstyled-components.browser.esm.jschunks loads thestyled-componentslibrary
2.3. Try to adjust theshared['styled-components']init MF config in:host/src/App.tsxby addinglibwith 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:8083with 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 bothmain.jsandstyled-components.browser.esm.jschunks loads thestyled-componentslibrary
3.3. Try to adjust theshared['styled-components']init MF config in:host-rspack/src/App.tsxby addinglibwith 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-componentsare loaded once (check<head>andNetwork) ✅
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.1Validations
- Read the docs.
- Read the common issues list.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Module federation issue and not a framework-specific issue.
- The provided reproduction is a minimal reproducible example of the bug.
Activity