如何使用模块联邦跨多个微前端共享MUI 5主题

Question

目前，我有多个使用Webpack 5的MUI 5模块联合会的v17应用程序。我希望我的MUI 5主题能够在所有这些微前端上共享，而不会有一个自己的ThemeProvider包在每个暴露的组件上。目前，应用程序1 (Shell)在MUI ThemeProvider中添加了一个自定义主题，所有的Micro都是作为子级加载的。自定义主题适用于容器组件，但不适用于微前端组件。我遵循的是具有以下配置的微前端架构：

1. APP 1 (Shell) -主要角色是管理身份验证、包装主题和使用来自其他微前端的页面组件。
2. 应用程序2(主页)-公开页面组件并依赖于来自shell的主题呈现。
3. 应用程序3(另一个页面等)-公开页面组件并依赖于来自shell的主题呈现。

...and等所有其他微锋。

应用程序1-模块联合配置：

const { ModuleFederationPlugin } = require('webpack').container
const { shared } = require('./shared/shared')

const homePage = 'https://localhost:8084';

var moduleFedConfig = new ModuleFederationPlugin({
    name: 'container',
    filename: 'remoteEntry.js',
    remotes: {
        homePage: `homePage@${homePage}/remoteEntry.js`,
    },
    shared: shared,
});

应用程序2-模块联合配置：

const { ModuleFederationPlugin } = require('webpack').container;
const { shared } = require('./shared/shared');

var moduleFedConfig = new ModuleFederationPlugin({
    name: 'homePage',
    filename: 'remoteEntry.js',
    exposes: {
        './HomePage': './src/page/HomePage',
    },
    shared: shared,
});

module.exports = { moduleFedConfig };

模块联合为APP1 & APP2共享依赖项配置

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

var shared = {
    react: {
        singleton: true,
        requiredVersion: '*',
    },
    'react-dom': {
        singleton: true,
        requiredVersion: '*',
    },
    'react-router-dom': {
        singleton: true,
        requiredVersion: '*',
    },
    '@okta/okta-auth-js/': {
        singleton: true,
        requiredVersion: 'auto',
    },
    '@okta/okta-react': {
        singleton: true,
        requiredVersion: 'auto',
    },
    '@reduxjs/toolkit': {
        singleton: true,
        requiredVersion: deps['@reduxjs/toolkit'],
    },
    'react-redux': {
        singleton: true,
        requiredVersion: deps['react-redux'],
    },
    '@emotion/react/' : {
        singleton: true,
        requiredVersion: '*',
    },
    '@emotion/styled' : {
        singleton: true,
        requiredVersion: '*',
    },
    '@mui/material' : {
        singleton: true,
        requiredVersion: '*',
    },
};

module.exports = { shared };

应用程序1 (Shell) -主题提供程序代码片段：

   React.useEffect(() => {
        const newIsLoaded =
            themeData.elementStyles !== null && themeData.theme !== null
        setIsThemeLoaded(newIsLoaded)
    }, [themeData.elementStyles, themeData.theme])

    return !isLoginRedirect &&
        authState?.isAuthenticated &&
        isThemeLoaded &&
        themeData.theme ? (
        <ThemeProvider theme={themeData.theme}>
            <CssBaseline />
            <AppContainer /> //All micro front end components are rendered within here
        </ThemeProvider>
    ) : (
        <Loading fadeIn />
    )

我预计，由于所有MUI模块都是作为单例共享的，所以初始shell中的所有主题数据设置都可以在子微前端组件中访问。

为了确认RTK和RTK查询在共享时工作得很好，所以我怀疑我在为MUI 5添加要共享的模块时遗漏了什么吗？

如果你还需要什么，请不要犹豫。

提前谢谢你。

Answer 1

我能够通过使用名为importRemote的MF库来解决这个问题，该库延迟加载组件，而不是在启动shell/容器时加载公开的组件。