Menu
I've added material UI according to the following example.
https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
Following is my code.
import React from 'react';
import Document, {Head, Html, Main, NextScript} from "next/document";
import {ServerStyleSheets} from '@material-ui/core/styles';
import theme from "../theme";
export default class MyDocument extends Document {
render() {
return (
<Html lang={"en"}>
<Head>
<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>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
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: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
};
};
I'm getting the following error when trying to load localhost:3000
wait - compiling...
event - compiled successfully
TypeError: Cannot destructure property `html` of 'undefined' or 'null'.
at Function.getInitialProps (C:\Work\funny\web\.next\server\pages\_document.js:299:9)
at process._tickCallback (internal/process/next_tick.js:68:7)
event - build page: /next/dist/pages/_error
Any idea?
985
import Head stand-alone from head like this
import Head from 'next/head'
Found the issue. I had wrapped the originalRenderPage with { }
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props}/>)
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With