无法解构 Next.JS 中 'undefined' 或 'null' 的属性 `html`

Question

我已经根据以下示例添加了 material UI。

https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js

以下是我的代码。

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()]
};
};

我在尝试加载时遇到以下错误 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

有什么想法吗？

Answer 1

发现问题。我用 { }

包装了 originalRenderPage

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

Answer 2

像这样从 head 独立导入 Head

import Head from 'next/head'

无法解构 Next.JS 中 'undefined' 或 'null' 的属性 `html`

Cannot destructure property `html` of 'undefined' or 'null' in Next.JS

server-side-rendering

next.js

无法解构 Next.JS 中 'undefined' 或 'null' 的 属性 `html`

Cannot destructure property `html` of 'undefined' or 'null' in Next.JS

server-side-rendering

next.js

无法解构 Next.JS 中 'undefined' 或 'null' 的属性 `html`