Next.js中_document.js报错，集成Material-UI求助

我是Next.js新手，在尝试集成Material-UI时，_document.js出现报错，错误截图如下：

我按照教程编写了完整的_document.js代码，已排查数小时仍未找到问题所在，希望能得到帮助，提前感谢！

以下是我的_document.js代码：

import React from 'react';
import Document, {
  Html,
  Main,
  NextScript,
  Head,
} from 'next/document';
import {
  ServerStyleSheets
} from '@material-ui/core/styles';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async(ctx) => {

    // Render app and page and get the context of the page with collected side effects.
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () => originalRenderPage({
        enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);

      return {
        ...initialProps,
        // Styles fragment is rendered after the app and page rendering finish.
        styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
      };
};

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