@material-ui导入报错：GlobalStyles未从@material-ui/system导出如何解决

./node_modules/@material-ui/core/GlobalStyles/GlobalStyles.js
Attempted import error: 'GlobalStyles' is not exported from '@material-ui/system' (imported as 'SystemGlobalStyles').

该报错默认仅抛出node_modules内部文件路径，不直接展示业务侧触发位置。

• 核心问题是@material-ui/core与@material-ui/system版本不匹配：GlobalStyles是@material-ui/system在v4.12.0版本才新增的导出项，如果本地安装的@material-ui/system版本低于4.12.0，但@material-ui/core版本为4.12.x及以上（依赖高版本system的GlobalStyles导出），就会触发导入失败。
• 常见触发场景：单独升级某一个MUI生态包、依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）解析错乱、node_modules内同时存在多版本@material-ui/system、安装依赖时网络异常导致包文件拉取不完整。
• 报错只显示node_modules路径是构建工具的默认行为：为了避免控制台输出过长，工具会折叠冗长的调用栈，仅展示最终抛出错误的文件位置。

• 先校验本地实际安装的包版本，在项目根目录执行对应包管理器的查询命令：
  • npm执行：npm ls @material-ui/core @material-ui/system
  • yarn执行：yarn list --pattern @material-ui
  • pnpm执行：pnpm ls @material-ui/core @material-ui/system
    查看输出结果：如果@material-ui/system版本低于4.12.0，同时@material-ui/core版本在4.12.x区间，即可确认是版本不匹配问题；如果输出显示存在多个不同版本的@material-ui/system被依赖引用，即为多版本共存问题。
• 如果版本号符合要求，直接打开本地node_modules/@material-ui/system的入口文件（cjs模式看index.js，esm模式看esm/index.js），搜索GlobalStyles关键字，确认入口是否真的导出了该变量，排除包文件损坏的情况。
• 定位业务侧触发文件：先点报错信息旁的折叠展开箭头，多数场景下能直接看到完整的引用链路，定位到业务代码文件；如果折叠栈没有相关信息，可开启构建的详细日志模式重新构建，比如CRA项目执行npm run build -- --stats=verbose，自定义webpack项目将配置中的stats字段设为verbose，即可拿到完整引入路径。

• 方案1（推荐）：对齐所有@material-ui前缀的包到v4系列的兼容版本，避免单独升级单个包，执行对应安装命令：
  • npm执行：npm install @material-ui/core@4.12.4 @material-ui/system@4.12.4 @material-ui/styles@4.11.5
  • yarn执行：yarn add @material-ui/core@4.12.4 @material-ui/system@4.12.4 @material-ui/styles@4.11.5
  • pnpm执行：pnpm add @material-ui/core@4.12.4 @material-ui/system@4.12.4 @material-ui/styles@4.11.5
• 方案2：如果存在锁文件错乱、依赖缓存异常，先删除node_modules文件夹和对应锁文件，再重新执行全量依赖安装命令，安装完成后重新校验版本匹配性。
• 方案3：如果是monorepo多包项目存在多版本MUI共存问题，通过包管理器的版本强制规则统一所有依赖引用的@material-ui/system版本：
  • npm用户在package.json添加overrides配置：

    {
      "overrides": {
        "@material-ui/system": "4.12.4"
      }
    }
    

  • yarn用户在package.json添加resolutions配置：

    {
      "resolutions": {
        "@material-ui/system": "4.12.4"
      }
    }
    

  • pnpm用户在package.json添加pnpm.overrides配置：

    {
      "pnpm": {
        "overrides": {
          "@material-ui/system": "4.12.4"
        }
      }
    }
    

  配置添加完成后重新执行依赖安装即可生效。
• 临时规避方案：如果暂时无法调整依赖版本，可将项目中用到的@material-ui/core/GlobalStyles替换为手动编写全局CSS的实现方案，不推荐长期使用该方式。

内容的提问来源于stack exchange，提问作者Ayyan Zakir