如何使用模块联合在多个微前端之间共享 MUI 5 主题

Question

我目前有多个 React v17 应用程序，它们利用 Webpack 5 中的模块联合。我希望我的 MUI 5 主题能够在所有这些微前端之间共享，而不需要在ThemeProvider每个公开的组件周围都有自己的主题。目前，APP 1（Shell）在 MUI 中添加了自定义主题ThemeProvider，并且所有 Micro UI 都作为子项延迟加载。自定义主题适用于容器组件，但不适用于微前端组件。我遵循具有以下配置的微前端架构：

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

...对于所有其他微前端等等。

APP 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,
});

APP 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 };

APP 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/容器启动时加载公开的组件。