0

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

enter image description here

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.

Shovan
  • 13
  • 1
  • 7

0 Answers0