React项目使用Material UI图标报错致页面空白问题求助

• React项目中引入Material UI相关组件、图标时触发报错，页面整体空白，移除所有MUI相关引用后页面可正常展示
• 非MUI来源的资源、第三方图标均可正常引入渲染，全新创建的React+JS项目可稳定复现该问题
• 溯源报错栈指向SvgIcon模块导出代码，报错信息包含not found in react相关提示
• 报错截图：
  

复现问题的业务代码：

import React from "react";
import MenuIcon from "@material-ui/icons/Menu";


function Header() {
   return (
    <div className="header">
        <h1>I am a header the beginnings of a website</h1>
        <MenuIcon ></MenuIcon>
    </div>
 );
}

export default Header;

报错栈定位到的对应代码：

export { default } from './SvgIcon';

该问题为MUI大版本不兼容导致：
当前安装的最新版MUI为v5+版本，官方从v5版本开始已将所有npm包的命名空间从旧版的@material-ui/* 迁移为@mui/*。代码中使用的@material-ui/icons/Menu是v4旧版本的图标导入路径，和本地安装的v5版本核心依赖无法匹配，会触发React模块解析失败、SvgIcon组件找不到对应导出的问题，最终导致页面白屏。

1. 卸载本地残留的旧版MUI包
   执行以下命令：

npm uninstall @material-ui/core @material-ui/icons

2. 安装v5版本对应的正确依赖
   执行以下命令：

npm install @mui/material @emotion/react @emotion/styled @mui/icons-material

3. 替换代码中所有旧版MUI的导入路径
   将旧版导入语句：

import MenuIcon from "@material-ui/icons/Menu";

替换为v5版本对应路径：

import MenuIcon from "@mui/icons-material/Menu";

其余MUI组件的导入也需同步替换：所有@material-ui/core/xxx格式的导入，统一修改为@mui/material/xxx即可。修改完成后重启开发服务，组件即可正常渲染。

内容的提问来源于stack exchange，提问作者Camp Nerd