title: "Element type invalid" when trying to install material ui on next.js project
body: <p>Hi i am adding Material UI to Next.js. I followed the example from the Next Js git hub along with a youtube tutorial. The error im getting is ....</p>
  <p>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.</p>
  <p>And here is the code from the _document.js</p>
  <pre><code>import React from 'react';
  import Document, { Html, Head, Main, NextScript } from 'next/document';
  import { ServerStyleSheets } from '@material-ui/core/styles';
  import theme from '../src/theme';
  
  export default class MyDocument extends Document {
    render() {
      return (
        &lt;Html lang=&quot;en&quot;&gt;
          &lt;Head&gt;
            {/* PWA primary color */}
            &lt;meta name=&quot;theme-color&quot; content={theme.palette.primary.main} /&gt;
            &lt;link
              rel=&quot;stylesheet&quot;
              href=&quot;https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&amp;display=swap&quot;
            /&gt;
          &lt;/Head&gt;
          &lt;body&gt;
            &lt;Main /&gt;
            &lt;NextScript /&gt;
          &lt;/body&gt;
        &lt;/Html&gt;
      );
    }
  }
  
  // `getInitialProps` belongs to `_document` (instead of `_app`),
  // it's compatible with server-side generation (SSG).
  MyDocument.getInitialProps = async (ctx) =&gt; {
    // Resolution order
    //
    // On the server:
    // 1. app.getInitialProps
    // 2. page.getInitialProps
    // 3. document.getInitialProps
    // 4. app.render
    // 5. page.render
    // 6. document.render
    //
    // On the server with error:
    // 1. document.getInitialProps
    // 2. app.render
    // 3. page.render
    // 4. document.render
    //
    // On the client
    // 1. app.getInitialProps
    // 2. page.getInitialProps
    // 3. app.render
    // 4. page.render
  
    // 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 = () =&gt;
      originalRenderPage({
        enhanceApp: (App) =&gt; (props) =&gt; sheets.collect(&lt;App {...props} /&gt;),
      });
  
    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()],
    };
  };
  </code></pre>
  <p>Code from error page -</p>
  <pre><code>pages/_document.js (57:4) @ Object.ctx.renderPage
  
    55 | 
    56 |   ctx.renderPage = () =&gt;
  &gt; 57 |     originalRenderPage({
       |    ^
    58 |       enhanceApp: (App) =&gt; (props) =&gt; sheets.collect(&lt;App {...props} /&gt;),
    59 |     });
    60 | 
  </code></pre>
  <p><a href="https://i.stack.imgur.com/LFpHR.png" rel="nofollow noreferrer">enter image description here</a></p>