在Next.js项目配置Material UI时出现Element type invalid错误求助

• Material UI版本与导入API不匹配：ServerStyleSheets是MUI v4的专属API，如果你安装的是MUI v5（包名为@mui/material），该API已被正式移除，从@material-ui/core/styles导入会得到undefined，直接触发元素类型无效错误。
• 导入路径错误：本地../src/theme文件未正确默认导出theme配置对象，或文件路径填写错误导致导入结果为undefined。
• Next.js版本兼容问题：若使用Next.js 13及以上版本，旧的Pages Router下的MUI服务端渲染配置无法适配App Router模式，会触发渲染异常。
• 根组件配置缺失：_app.js中未正确引入ThemeProvider包裹应用根组件，导致服务端渲染时MUI上下文缺失。

情况1：使用MUI v5版本 #

1. 替换所有旧版MUI导入路径，将@material-ui/*统一替换为@mui/*，移除ServerStyleSheets相关导入。
2. 改用MUI v5官方适配Next.js的服务端渲染方案，基于Emotion实现样式收集，_document.js修改为如下代码：

import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link
            rel="stylesheet"
            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const originalRenderPage = ctx.renderPage;
  const cache = createEmotionCache();
  const { extractCriticalToChunks } = createEmotionServer(cache);

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) =>
        function EnhanceApp(props) {
          return <App emotionCache={cache} {...props} />;
        },
    });

  const initialProps = await Document.getInitialProps(ctx);
  const emotionStyles = extractCriticalToChunks(initialProps.html);
  const emotionStyleTags = emotionStyles.styles.map((style) => (
    <style
      data-emotion={`${style.key} ${style.ids.join(' ')}`}
      key={style.key}
      dangerouslySetInnerHTML={{ __html: style.css }}
    />
  ));

  return {
    ...initialProps,
    styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
  };
};

3. 新增src/createEmotionCache.js文件，内容如下：

import createCache from '@emotion/cache';

export default function createEmotionCache() {
  return createCache({ key: 'css', prepend: true });
}

4. 修改_app.js配置，引入ThemeProvider和CacheProvider：

import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

const clientSideEmotionCache = createEmotionCache();

export default function MyApp(props) {
  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

  return (
    <CacheProvider value={emotionCache}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </CacheProvider>
  );
}

情况2：使用MUI v4版本 #

1. 确认依赖安装正确，执行以下命令重新安装依赖：

rm -rf node_modules package-lock.json yarn.lock
npm install @material-ui/core next react react-dom

2. 检查src/theme.js文件，确保默认导出了createMuiTheme生成的配置对象，示例如下：

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  // 你的主题配置
});

export default theme;

3. 确认_app.js中已正确用ThemeProvider包裹根组件。

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