1
  • framework: react.js v18
  • packages: @mui/material v5, @emotion/react v11
  • apps: theme(host), nav(remote)

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!

imrish
  • 11
  • 3
  • The theme is leaking because the remote provider is providing it :) What is your desired outcome? – Eran Goldin Sep 04 '22 at 10:46
  • lol, my question is why though:) I simply want to make sure that the app is not exporting unnecessary data, this time its a tiny chunk that describes a color, in a different case it could easily be a larger chunk that would decrease performance and even cause bugs. I thought that the @emotion package responsible for this chunk but it seems that it's something else.. – imrish Sep 05 '22 at 06:30
  • This app's main purpose is to provide components to another app but it also has it's own UI with green color set as 'primary' color. Why does it share the 'green' parameter along with the component, on the 'remoteEntry.js' file? After all, the app doesn't share the theme object or functions.. – imrish Sep 05 '22 at 06:50

1 Answers1

0

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

y-me
  • 277
  • 4
  • 13