Node16升18+MUIv4升v5后CircularProgress报TypeError求助

环境与依赖 #

当前使用的包版本：

"@emotion/babel-plugin": "^11.11.0",
"@emotion/core": "^10.1.1",
"@emotion/react": "^11.11.4",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.11.5",
"@mui/icons-material": "^5.15.13",
"@mui/lab": "^5.0.0-alpha.168",
"@mui/material": "^5.15.13",
"next": "14.1.3"

问题背景 #

作为React和Next.js新手，在将Node从v16升级到v18时同步把MUI从v4升级到v5。运行了MUI官方迁移文档里推荐的所有codemods，但部分包未被识别。之后参考GitHub帖子里的实现，基础调试后遇到以下错误：TypeError: Cannot read properties of undefined (reading 'main')

相关代码 #

_document.js #

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';
import { renderToString } from 'react-dom/server';
import { extractCritical } from '@emotion/server';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);

      // Extract critical CSS
      const emotionStyles = extractCritical(<Main />);
      const emotionCss = emotionStyles.css;

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            <style dangerouslySetInnerHTML={{ __html: emotionCss }} />
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <meta name="description" content="" />
          <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        </Head>
        <body>
          <noscript>You need JavaScript to use this web application</noscript>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Loading.js（唯一调用CircularProgress的文件） #

import * as React from 'react';
import CircularProgress from '@mui/material/CircularProgress';
import styled from '@emotion/styled'

import { createTheme, ThemeProvider } from '@mui/system';


const theme = createTheme();
const Container = styled.div`
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
`;

function Loading() {
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    function tick() {
      // reset when reaching 100%
      setProgress((oldProgress) => (oldProgress >= 100 ? 0 : oldProgress + 1));
    }

    const timer = setInterval(tick, 20);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <ThemeProvider theme={theme}>
    <Container>
      <CircularProgress variant="determinate" value={progress} />
    </Container>
    </ThemeProvider>
  );
}

export default Loading;

报错信息 #

TypeError: Cannot read properties of undefined (reading 'main')
    at CircularProgressRoot.ownerState.ownerState (PATH\node_modules\@mui\material\node\CircularProgress\CircularProgress.js:82:58)
    at processStyleArg (PATH\node_modules\@mui\system\createStyled.js:66:67)
    at PATH\node_modules\@mui\system\createStyled.js:172:25
    at handleInterpolation (PATH\node_modules\@emotion\serialize\dist\emotion-serialize.cjs.dev.js:149:24)
    at Object.serializeStyles (PATH\node_modules\@emotion\serialize\dist\emotion-serialize.cjs.dev.js:274:15)
    at PATH\node_modules\@emotion\styled\base\dist\emotion-styled-base.cjs.dev.js:167:34
    at PATH\node_modules\@emotion\react\dist\emotion-element-f93e57b0.cjs.dev.js:85:16
    at renderWithHooks (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderForwardRef (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5859:5)
    at renderElement (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (PATH\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11) {
  page: '/'
}

已查阅Stack Overflow评论、咨询相关技术内容、观看教程视频及CircularProgress官方文档，仍未找到解决方法，特此求助。

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