Next.js服务端报错Element type is invalid，指向_document.js指定代码行

错误原文 #

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

可能原因及对应修复方法 #

• MUI版本不兼容或导入错误
  代码中使用的ServerStyleSheets是Material UI v4（包名@material-ui/core）专属的服务端样式收集API，如果你的项目实际安装的是v5及以上版本的MUI（包名已更改为@mui/material），该API已被废弃移除，导入后会返回undefined，初始化时直接触发该错误。
  修复方式：确认MUI版本和代码匹配，v4版本保留当前实现；v5版本替换为官方提供的@mui/material/styles下的新服务端渲染方案。

• _document.js存放路径错误
  Next.js的Pages Router规定_document.js必须放在项目pages/根目录下，如果文件放在pages/api、src/pages外等其他路径，会导致系统无法识别自定义Document逻辑，渲染时传入的App参数为undefined。
  修复方式：将_document.js移动到pages/根目录即可。

• 导出导入不匹配
  两个常见的导出错误会触发该问题：

  1. 检查../src/theme文件的导出方式：_app.js中使用默认导入引入theme，如果theme文件采用export const theme = {}的命名导出，会导致theme为undefined，ThemeProvider渲染失败。
  2. 检查pages/目录下所有页面组件，是否都使用export default导出组件，若采用命名导出会导致MyApp接收的Component参数为undefined。

• Next.js版本不兼容
  如果你使用的是Next.js 13+的App Router，_document.js仅适配Pages Router，App Router下需要用根布局app/layout.js替代，混用两种路由模式会导致渲染逻辑异常。如果是Next.js 12+的Pages Router版本，确认没有开启不兼容的实验性配置项。

内容的提问来源于stack exchange，提问作者ksusha-beep