App Structure
I'm using Next JS in Host app and React JS in remote app. Both apps are using below library as dependency
Note
I'm using ModuleFederationPlugin for both app and not using Next Js Specific module federation plugin
Remote app deps
"@mui/icons-material": "^5.11.0",
"@mui/material": "^5.11.4",
"@mui/styles": "^5.11.2",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
Host app deps
"@emotion/react": "^11.10.4",
"@emotion/styled": "^11.10.4",
"@mui/icons-material": "^5.10.9",
"@mui/lab": "^5.0.0-alpha.103",
"@mui/material": "^5.10.9",
"@mui/styles": "^5.10.9",
Problem Statement
I'm having a problem when trying to share material related module in Host app. When running host app, it shown below error.
I don't want to add eager: true
in material related dependencies since its ended up creating large initial chunk which I don't want. Also removing material related dependencies from Host app seems not a good idea because then multiple instance warning is showing.
The remote app is also configured as shown here
Please share some thought on how to share these deps in an optimised way.
Error Screenshot
Host app shared config (Next JS App)
const dotenvFile = `.env.${process.env.DOTENV_RUNTIME || 'local'}`
require('dotenv').config({ path: dotenvFile })
const deps = require('../../package.json').dependencies
module.exports = {
distDir: '../../dist/client',
async rewrites() {
/*
This rewrites method is needed to persist route state while using MFE.
Keep adding base route here when onboarding new MFE App
*/
return [ ]
},
webpack: (config, { webpack, isServer }) => {
const { ModuleFederationPlugin } = webpack.container
if (!isServer) {
config.plugins.push(
new webpack.IgnorePlugin({
resourceRegExp: /urlencoded-body-parser/,
}),
new ModuleFederationPlugin({
name: 'Host ui',
remotes: {},
shared: {
react: {
eager: true,
singleton: true,
requiredVersion: deps.react,
},
'react-dom': {
eager: true,
singleton: true,
requiredVersion: deps['react-dom'],
},
'@mui/materia': {
requiredVersion: deps['@mui/materia'],
singleton: true,
},
'@mui/icons-material': {
requiredVersion: deps['@mui/icons-material'],
singleton: true,
},
'@mui/styles': {
requiredVersion: deps['@mui/styles'],
singleton: true,
},
'@emotion/react': {
requiredVersion: deps['@emotion/react'],
singleton: true,
},
},
}),
)
}
return config
},
}
Remote app shared config (React JS App)
shared: {
react: {
requiredVersion: deps.react,
singleton: true,
},
'react-dom': {
requiredVersion: deps['react-dom'],
singleton: true,
},
'react-router': {
requiredVersion: deps['react-router'],
singleton: true,
},
'react-router-dom': {
requiredVersion: deps['react-router-dom'],
singleton: true,
},
'@mui/materia': {
requiredVersion: deps['@mui/materia'],
singleton: true,
},
'@mui/icons-material': {
requiredVersion: deps['@mui/icons-material'],
singleton: true,
},
'@mui/styles': {
requiredVersion: deps['@mui/styles'],
singleton: true,
},
'@emotion/react': {
requiredVersion: deps['@emotion/react'],
singleton: true,
},
},
Github Issue link - https://github.com/module-federation/module-federation-examples/issues/2740
I have tried adding eager:true
in Host app but its making initial chunk 5 MB which is not expected. My expectation is my configuration works without adding eager
key in any app.