Hola, estoy agregando Material UI a Next.js. Seguí el ejemplo de Next Js git hub junto con un tutorial de youtube. El error que me sale es....
Error: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.
Y aquí está el código de _document.js
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 ( <Html lang="en"> <Head> {/* PWA primary color */} <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> ); } } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with server-side generation (SSG). MyDocument.getInitialProps = async (ctx) => { // 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 = () => 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()], }; };Código de la página de error -
pages/_document.js (57:4) @ Object.ctx.renderPage 55 | 56 | ctx.renderPage = () => > 57 | originalRenderPage({ | ^ 58 | enhanceApp: (App) => (props) => sheets.collect(<App {...props} />), 59 | }); 60 |Ahora se ha resuelto. Aunque el error se mostraba en la página app.js, se solucionó eliminando los corchetes de la importación {link} en mi página de índice.
