在远程微前端应用程序中导入 MUI 自动完成组件后，无法读取 null 的属性（读取“useContext”）

Question

我们有使用 originjs/vite-plugin-federation 的微前端 React 应用程序。远程微前端之一使用 MUI 组件库，我们尝试添加自动完成组件，但出现错误：

Cannot read properties of null (reading 'useContext')

我们尝试了很多方法来解决这个问题：我们将应用程序包装在 StyledEngineProvider、ThemeProvider 和 React 上下文中。我们还尝试设置对等依赖关系，尝试删除节点模块并重新安装。我们尝试通过 npx 而不是yarn classic 来运行我们的应用程序

如何解决这个问题？

Answer 1

通过向 vite.config.ts 添加一些设置解决了该问题：

import federation from "@originjs/vite-plugin-federation";
import react from "@vitejs/plugin-react";

import { defineConfig } from "vite";

export default defineConfig({
    plugins: [
        react(),
        federation({
            name: "root",
            remotes: {
                postsApp: "http://localhost:5175/assets/remoteEntry.js",
            },
            shared: [
                {
                    "@mui/material": {
                        requiredVersion: "^5.15.18",
                    },
                },
                {
                    react: {
                        requiredVersion: "^18.2.0",
                    },
                },
                {
                    "react-dom": {
                        requiredVersion: "^18.2.0",
                    },
                },
            ],
        }),
});

这是一个简单的配置示例，与我们的类似。要解决问题，您需要将 mui 添加为远程和主机微前端的共享依赖项：

{
    "@mui/material": {
        requiredVersion: "^5.15.18",
    },
},