Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Material-ui/lab and material-ui/pickers overriding styles when being imported from remote federated modules
See original GitHub issueWe are using webpack 5 and a design system that hosts federated modules from material ui. As of now we have the following setup for the ModuleFederationPlugin.
new ModuleFederationPlugin({
name: 'rosters-web-app',
// TODO: Make optional depending if the DS is running locally
remotes: {
'dataeng-ds': federationUrl
},
shared: {
...pkgJson.dependencies,
"@material-ui/core": {
singleton: true,
},
react: {
singleton: true,
requiredVersion: pkgJson.dependencies.react
},
"react-dom": {
singleton: true,
requiredVersion: pkgJson.dependencies["react-dom"]
}
},
})
This is how a page on the app displays:
However, when we use a component from material-ui/lab or material-ui/pickers it seems the styles get messed up.
Notice the buttons are now unstyled/overwritten
Does anyone have an idea on why this is happening?
Note: I have also tried adding
"@material-ui/lab": {
singleton: true,
},
to the shared list and it still does not work.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:4
- Comments:20 (7 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Although this has been marked as closed, i would like to continue and try to understand the issue. Is this material-ui specific thing?? We don’t notice this with other libraries that we’re using.
The effects of this issue are understood. It seems to download and load the same component twice (For example, Button or Typography) and if this happens at various times of the page, it will cause the component to create styles once more and add them to <head>. The big question is why it does that.
To my understanding, the solution of using
material-ui/core/(With a Trailing Slash) will make everything under this as a shared component individually, which in turn creates a whole bunch of files (As they are all shared individually). Although this should not make an issue since the browser can cache them, and initially if it uses http2 it will download a bunch of them together, it still creates a bunch more files. BUT, this does solve the issue since webpack notices the file paths are exactly the same…?Can it be that, due to different tree-share combinations of those components, it bundles Button in different files between the remotes and therefore forces the loading of that component once more?
Yeah, from what I understand, the libraries that use a context should be shared as singletons. I think the issue here could be the way that material-ui imports and exports some components for the lab. In particular the Button component. I traced my issue back to the Button.
An extra styled sheet for ButtonBase was being added to the <head> of my index.html doc which was over-writing the styles.
I have not solved this issue yet.