[Question] What's the best practices of shared dependencies?

1. Include all dependencies in shared

const { dependencies } = require('./package.json');

{
  shared: {
    ...dependencies,
    react: {
      singleton: true,
      requiredVersion: dependencies['react'],
    },
    'react-dom': {
      singleton: true,
      requiredVersion: dependencies['react-dom'],
    },
  },
}

This seems will end up with too many chunks, feels a bit overwhelming as it leads to a lot more requests.

1. Only include necessary ones, like those need to be singleton and those large dependencies

{
  shared: {
    component-library: {
      requiredVersion: '^x.x.x',
    },
    '@apollo/client': {
      requiredVersion: '^x.x.x',
    },
    react: {
      singleton: true,
      requiredVersion: dependencies['react'],
    },
    'react-dom': {
      singleton: true,
      requiredVersion: dependencies['react-dom'],
    },
  },
}

Then we would need to carefully sync the required versions so that each federated module compatible with each other

1. Only include those need to be singleton

{
    react: {
      singleton: true,
      requiredVersion: dependencies['react'],
    },
    'react-dom': {
      singleton: true,
      requiredVersion: dependencies['react-dom'],
    },
  },
}

I understand it is different case by case, but would be nice to see what other people think 😃

[ScriptedAlchemy]

Consider booking a call. This is tricky to document.

Free of charge. I’ll record the session and post it back here for others.

Easier to talk than write. I cannot read very well so it’s difficult to keep track of the words.

https://calendly.com/d/dwg-3cb-75w/private-session

[icy0307]

Just to be clear, For an comprehensive example of an react-redux app, instead of the below code, https://github.com/module-federation/module-federation-examples/blob/5142c518b29e6ec94216e3c895d448cff3e2ef10/comprehensive-demo/app-01/webpack.config.js#L61-L75 the correct way to do this is?

const deps = require('./package.json').dependencies;
...
 shared: { 
   'core-js/': { 
     requiredVersion: deps.core-js,
   }, 
   'lodash-es/': { 
     requiredVersion: deps.lodash-es,
   }, 
   '@reduxjs/toolkit': { 
     singleton: true, 
   }, 
   'react-dom': { 
     singleton: true, 
   }, 
   react: { 
     singleton: true, 
   }, 
   i18next: { 
     singleton: true, 
   }, 
  '@mui/material/': {
     requiredVersion: deps.@mui/material,
    }
 },

1. What if I split chunk in my app(host app), would core-js/ bundle the polyfill that not in host app initial chunk?
2. Sometimes, host app and remote apps are not in the same repo. The remote apps may be used in different host apps. If host app1 wanna share the same store, and host app2 need store isolation, how to handle this situation? @ScriptedAlchemy