Comments (6)
After further digging, it is caused by @mui/system/useThemeWithoutDefault. Not sure how to solve it in vite federation plugin, webpack module federation works fine.
from vite-plugin-federation.
The root component might be @mui/material/Popper. Can anyone help check it? Thanks.
Same problem here, it looks like it's using useTheme
that relies on useContext
, also @originjs doesn't allow singleton shared dependencies. Which makes this library useless for big project.
from vite-plugin-federation.
To reproduce create a component based on @mui/x-date-pickers on remote project.
from vite-plugin-federation.
The root component might be @mui/material/Popper. Can anyone help check it? Thanks.
from vite-plugin-federation.
Hi, I think your error is repeated Issue 294. When I have had the same problem I have solved it by adding to the host component the dependencies of the remote component, this is not an optimal solution but it can get you out of trouble.
from vite-plugin-federation.
I cannot stress enough how critical managing dependency versions is when using this plugin, especially when dealing with singleton patterns like React's context.
Recently, I encountered issues related to context API failures in a federated module which was indirectly caused by mismatched library versions. It turns out, the root cause was related to how versions were specified in package.json.
For instance, specifying a dependency version with a caret (^), such as react-router-dom:"^6.8.2", allows npm to install minor updates automatically. This can lead to scenarios where your lockfile points to a newer version than you explicitly tested with, like 6.23.0 in this case. Here’s what you might see in your yarn.lock or package-lock.json:
react-router-dom@^6.8.2:
version "6.23.0"
This scenario highlights the importance of using exact versions in federated modules or at least being very deliberate about version ranges. In a federated environment, unexpected updates can lead to incompatibilities, especially if different versions of the same package end up being loaded in the host and remote apps.
A safer approach could be to remove the caret (^) and pin the dependencies to exact versions to prevent such issues in both your host and remote apps:
"react-router-dom": "6.8.2"
This ensures that all instances of the application, across different federated modules, use exactly the same version, reducing the risk of runtime errors due to version mismatches.
While this might reduce flexibility in quickly receiving updates, it adds a layer of reliability and predictability to your build and deployment processes in a federated architecture.
Hope this helps anyone struggling with similar issues, if anyone has any alternative solutions please let me know!
The plugin should ideally manage these dependencies more effectively, especially as the number of federated apps grows, making manual dependency management increasingly complex which is not an ideal scenario.
from vite-plugin-federation.
Related Issues (20)
- ERROR: Expression Expected - Unable to understand this error
- Mutliple WS connections established to the remote app
- Adding and then removing `manualChunks` causes runtime error
- flattenModule breaks dependencies HOT 1
- exporting variables from the shared module, the variables within the shared module appear as undefined HOT 1
- module federation react typescript webpack and vite throws an error "Loading script failed." HOT 2
- Vue2.7, Vite host with webpack remote, "shared" create undefiend paramter(with Reproduction project)
- 【example demo bug】Did not work as expected when using the sample demo HOT 3
- 【bug】vue3-demo-esm-shared-store running __federation_shared_myStore-ed6e87a0.js 404
- Module Federation + base url HOT 3
- Vite Module Federation CORS error HOT 4
- Do something like @module-federation/typescript? HOT 3
- Error: Minified React error #321; HOT 5
- Enable CORS by including credentials when fetching Remotes on other Domains
- Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL HOT 2
- Shared dependencies is loaded sequentially
- [MaterialUI] Cannot read properties of null (reading 'useContext')
- Is this project abandonned HOT 8
- Error accessing remoteEntry.js files throughout vite examples HOT 1
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 vite-plugin-federation.