CODEWITHSUNDEEP
javascriptreactjswebpack-dev-serverwebpack-5webpack-module-federation
imrish
imrish

Reputation: 11

React with Webpack-5 & Module-Federation, Sharing @mui

The remote app(nav) has it's own ThemeProvider(@mui/material) component with primary color set to green(@mui/material/colors), but it only expose a component named 'AppBar'. Yet, when the host app consume it on runtime, it still loads the green color along side with the shared component but only to override it with the current app's primary color.

*Note: I did find the following paragraph in the book "Practical Module Federation 2.0"(page 45):

When the remoteEntry.js is loaded by the browser it registers a global variable with the name specified in the library key in the ModuleFederationPlugin configuration. This variable has two things in it, a get function that returns any of the remote modules, and an override function that manages all of the shared packages.

What is not clear to me yet is how this green color is 'leaking' out of the Theme component which is a completely separated component in a separate file and isn't exposed outside of the app..

my webpack.config.js file has shared field with: react, react-dom & @emotion/react. I also tried adding @emotion/styled but it hasn't changed anything.

Is anyone familiar with this subject? Your help would be much appreciated! Thanks!

Upvotes: 1

Views: 2187

Answers (1)

y-me
y-me

Reputation: 449

Add your 'webpack.config.js' the shared dependency '@mui/system' and '@mui/styles' both with singleton set to 'true'

Upvotes: 0

Related Questions