Comments (6)
Guys, Hi! I apologize for reopening this question, but I have a slightly different case and I can't find recommendations about this anywhere. In my project we use MF, but we don't use a monorepo. There is a host application, and there are N remote applications that are loaded on the page of the host application. And I have a question about using singleton
for shared dependencies. Obviously for dependencies like React
, React DOM
etc we have to use singleton
for the application to work correctly. But besides these dependencies, I also have such dependencies as styled-components
, @reduxjs/toolkit
, @tanstack/react-query
and so on, and I have a question about using the singleton
flag for them: if we use the singleton
flag for all dependencies, then how to build a flow of updating shared dependencies in applications in this case?
What is the point: if we use singleton
, then if one team updates for example styled-components
(major version), they will fail and will not work, because the version of the host application will be used (well, or for example the version of styled-components
from another remote application loaded earlier than the current one). If we don't use singleton
, then in case of requiredVersion
mismatch (with strictVersion
disabled) MF will simply load the second version of styled-components
on the page, the only question left is whether a certain library will be (in our case styled-components
) work correctly in two instances of different versions on the page.
In general, the question is: should we use singleton
for all shared dependencies in this case or not? It seems to me that singleton
is a strict restriction for those dependencies that in principle cannot work on the page in several instances of different versions, because even without singleton
if the version of the library is correct, the already loaded version will be used, if it is available. So in this case we don't lose in performance (we don't load unnecessary modules without actual need).
Could you please share your opinion on this issue? @ScriptedAlchemy 🙏
from universe.
I've used federation a good amount and I'd personally recommend defaulting to sharing everything as a singleton.
I just don't think it's safe to assume that people are writing code in a non-singleton way, especially related to React.
It's awesome that federation can support multiple implementations of modules but it feels like something you'll want to opt-in to. Whether it's never sharing or it's version-based sharing.
from universe.
Ill second that.
If you work somewhere where the codebase isn't a complete shitshow, and can actually keep deps aligned - then id suggest it. It can reduce whats downloaded and so on.
You could say singleton by default and make the users have to opt out case by case, this would improve general alignment - similar to how nx and rush really dont like multi versions of same package installed in monorepo
from universe.
Singleton by default and make the users have to opt-out case by case
Really makes sense, thank you for your answers
from universe.
I had the same thoughts @D9RS. I'd love to hear if you've learned anything new since you posted your comment.
from universe.
@D9RS use singleton on things that need react context or singleton context, like a provider or redux
Singleton for all shared packages will probably break something when major version is a issue on a library
from universe.
Related Issues (20)
- [CORS]: @module-federation/nextjs-mf HOT 3
- Cannot use shared module in .mjs file correctly HOT 4
- Adding element to page with id that matches remote's name causes `TypeError: remoteEntryExports.init is not a function` HOT 2
- External modules not shared HOT 4
- [MF Plugin] "promise new Promise" syntax doesn't work with @ char in it HOT 4
- Entry runtime miss function "O" HOT 6
- esbuild plugin error: Top-level await is not available in the configured target environment HOT 1
- @module-federation/nextjs-mf version 8.4.0 breaks API routes
- Having production error - TypeError: (void 0) is not a function at .next/server/webpack-api-runtime.js:1:199 HOT 1
- Nextjs plugin doesn't work unless the "unsafe-eval" CSP header is set
- Vue Bridge package lacks `dist` HOT 4
- misleading error message when remoteEntry.files is empty
- Module Federation Plugin for Vite HOT 6
- Quick Start Error - Failed to load file HOT 4
- Project with tsconfig.json with compilerOptions.paths and path aliases usage fails to compile federated types HOT 1
- loading a remote wipes out the registered shared modules by the host even if they are declared singleton
- Missing `dist` in the release of `@module-federation/bridge-vue3` HOT 1
- Critical dependency warning in @module-federation/utilities due to dynamic import HOT 1
- add option to exclude shared dependencies from build
- Nx angular dynamic mfe got NG0203 error
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from universe.