[runtime] styled-components loads twice without shared.lib specified, but Vite SPA breaks with it
#3473
Comments
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
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
libto MF runtime init function, for thestyled-componentsshare module, completely breaks the Vite apps, while it works completely fine for RsPack and Webpack bundlers.I've noticed that
libis 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 ofstyled-componentsbeing fetched by the browser. Even though the versions match exactly between the host and remote, and thesingleton: trueoption 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/vite@1.1.5hostSPA which consumes MF via@module-federation/runtime@0.8.5, bundled with Vitehost-rspackSPA which consumes MF via@module-federation/runtime@0.8.5, bundled with RsPackReproduction steps
Open
http://127.0.0.1:8082with Vite SPA running2.1. Check
<head>section of the application and observe that two<style data-styled="active" data-styled-version="5.3.11"></style>tags were added2.2. Check the Network tab and observe that both
index.jsandstyled-components.browser.esm.jschunks loads thestyled-componentslibrary2.3. Try to adjust the
shared['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 running3.1. Check
<head>section of the application and observe that two<style data-styled="active" data-styled-version="5.3.11"></style>tags were added3.2. Check the Network tab and observe that both
main.jsandstyled-components.browser.esm.jschunks loads thestyled-componentslibrary3.3. Try to adjust the
shared['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/runtimeloads thestyled-componentsmodule twice, unless we passlibto its shared configuration.2. Passing
libto shared config while using Vite bundler breaks the app, while it works fine with RsPackReproduction
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
The text was updated successfully, but these errors were encountered: