Next.js应用升级Material UI V4至V5后_document.js元素类型无效错误

问题根源 #

你遇到的错误是因为MUI V5中StylesProvider不再从@mui/material导出，而是迁移到了@mui/styles包中，当前导入路径错误导致组件为undefined，触发了React的元素类型校验错误。

修复方案 #

1. 修正导入路径 #

将错误的导入代码：

import { StylesProvider, StyledEngineProvider } from '@mui/material'

替换为：

import { StylesProvider } from '@mui/styles'
import { StyledEngineProvider } from '@mui/material'

2. 确认依赖有效性 #

你的package.json已经包含@mui/styles依赖，版本与其他MUI包匹配，无需额外安装：

"@mui/styles": "^5.11.2",

3. 优化组件层级（可选） #

MUI V5推荐将StyledEngineProvider放在最外层，确保样式引擎初始化顺序正确，调整后的代码结构如下：

<StyledEngineProvider injectFirst>
  <ConditionalWrapper
    condition={jss}
    wrapper={children => <StylesProvider jss={jss}>{children}</StylesProvider>}
  >
    <ConditionalWrapper
      condition={theme}
      wrapper={children => <ThemeProvider theme={theme}>{children}</ThemeProvider>}
    >
      {children}
    </ConditionalWrapper>
  </ConditionalWrapper>
</StyledEngineProvider>

核心说明 #

• MUI V5对样式模块做了拆分：StylesProvider负责JSS样式的全局配置，归属于@mui/styles；StyledEngineProvider用于切换样式引擎（默认Emotion），仍在@mui/material中；
• 错误提示中的“got: undefined”直接指向导入的组件不存在，优先检查V5的模块导出结构是否与你的导入路径匹配。

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