title: TypeError: (0 , .....) is not a function
body: <p>I'm building a next.js application with Material-ui.
  I am trying to apply material-ui to my project.</p>
  <p>I copied the <code>_app.js , _document.js , theme.js</code> from the official GitHub page.</p>
  <p>All of the files are in the same folder <code>pages</code>.
  BUT when running the app it appears this error that I don't understand.</p>
  <pre><code>TypeError: (0 , _material_ui_core_styles__WEBPACK_IMPORTED_MODULE_0__.createTheme) is not a function
      at Object../pages/theme.js (C:\Users\micor\OneDrive\Documents\React\Proyectos React\nextMaterial\my-app\.next\server\pages\_document.js:193:84)
      at __webpack_require__ (C:\Users\micor\OneDrive\Documents\React\Proyectos React\nextMaterial\my-app\.next\server\webpack-runtime.js:25:42)
      at Object../pages/_document.js (C:\Users\micor\OneDrive\Documents\React\Proyectos React\nextMaterial\my-app\.next\server\pages\_document.js:32:64)
      at __webpack_require__ (C:\Users\micor\OneDrive\Documents\React\Proyectos React\nextMaterial\my-app\.next\server\webpack-runtime.js:25:42)
      at __webpack_exec__ (C:\Users\micor\OneDrive\Documents\React\Proyectos React\nextMaterial\my-app\.next\server\pages\_document.js:395:52)
      at C:\Users\micor\OneDrive\Documents\React\Proyectos React\nextMaterial\my-app\.next\server\pages\_document.js:396:321
      at Function.__webpack_require__.X (C:\Users\micor\OneDrive\Documents\React\Proyectos React\nextMaterial\my-app\.next\server\webpack-runtime.js:108:21)
      at C:\Users\micor\OneDrive\Documents\React\Proyectos React\nextMaterial\my-app\.next\server\pages\_document.js:396:47
      at Object.&lt;anonymous&gt; (C:\Users\micor\OneDrive\Documents\React\Proyectos React\nextMaterial\my-app\.next\server\pages\_document.js:399:3)
      at Module._compile (node:internal/modules/cjs/loader:1108:14)
  </code></pre>
  <p>I will leave the code down bellow</p>
  <p>_document.js</p>
  <pre><code>import * as React from 'react';
  import { CacheProvider } from '@emotion/react';
  import createCache from '@emotion/cache';
  import Document, { Html, Head, Main, NextScript } from 'next/document';
  import { ServerStyleSheets } from '@material-ui/styles';
  import createEmotionServer from '@emotion/server/create-instance';
  import theme from './theme';
  
  const getCache = () =&gt; {
    const cache = createCache({ key: 'css', prepend: true });
    cache.compat = true;
  
    return cache;
  };
  
  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 static-site 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;
  
    const cache = getCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);
  
    ctx.renderPage = () =&gt;
      originalRenderPage({
        enhanceApp: (App) =&gt; (props) =&gt; sheets.collect(&lt;App {...props} /&gt;),
        // Take precedence over the CacheProvider in our custom _app.js
        enhanceComponent: (Component) =&gt; (props) =&gt;
          (
            &lt;CacheProvider value={cache}&gt;
              &lt;Component {...props} /&gt;
            &lt;/CacheProvider&gt;
          ),
      });
  
    const initialProps = await Document.getInitialProps(ctx);
    const emotionStyles = extractCriticalToChunks(initialProps.html);
    const emotionStyleTags = emotionStyles.styles.map((style) =&gt; (
      &lt;style
        data-emotion={`${style.key} ${style.ids.join(' ')}`}
        key={style.key}
        // eslint-disable-next-line react/no-danger
        dangerouslySetInnerHTML={{ __html: style.css }}
      /&gt;
    ));
  
    return {
      ...initialProps,
      // Styles fragment is rendered after the app and page rendering finish.
      styles: [
        ...React.Children.toArray(initialProps.styles),
        sheets.getStyleElement(),
        ...emotionStyleTags,
      ],
    };
  };
  </code></pre>
  <p>_app.js</p>
  <pre><code>import PropTypes from 'prop-types';
  import Head from 'next/head';
  import { ThemeProvider } from '@material-ui/core/styles';
  import { CacheProvider } from '@emotion/react';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import createCache from '@emotion/cache';
  import theme from './theme';
  
  export const cache = createCache({ key: 'css', prepend: true });
  
  export default function MyApp(props) {
    const { Component, pageProps } = props;
  
    React.useEffect(() =&gt; {
      // Remove the server-side injected CSS.
      const jssStyles = document.querySelector('#jss-server-side');
      if (jssStyles) {
        jssStyles.parentElement.removeChild(jssStyles);
      }
    }, []);
  
    return (
      &lt;CacheProvider value={cache}&gt;
        &lt;Head&gt;
          &lt;title&gt;My page&lt;/title&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1, width=device-width&quot; /&gt;
        &lt;/Head&gt;
        &lt;ThemeProvider theme={theme}&gt;
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          &lt;CssBaseline /&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/ThemeProvider&gt;
      &lt;/CacheProvider&gt;
    );
  }
  
  MyApp.propTypes = {
    Component: PropTypes.elementType.isRequired,
    pageProps: PropTypes.object.isRequired,
  };
  </code></pre>
  <p>and final theme.js</p>
  <pre><code>import { createTheme } from '@material-ui/core/styles';
  import { red } from '@material-ui/core/colors';
  
  // Create a theme instance.
  const theme = createTheme({
    palette: {
      primary: {
        main: '#556cd6',
      },
      secondary: {
        main: '#19857b',
      },
      error: {
        main: red.A400,
      },
      background: {
        default: '#fff',
      },
    },
  });
  
  export default theme;
  </code></pre>