我正在尝试将Next.js与Typescript和Material UI结合使用。在线上有无数的教程，介绍如何设置Next.js以使其与Material UI一起使用，并且它们似乎都在_document.js和中_app.js分别使用了完全相同的代码。
我都试过适应代码_document.js一点点为打字稿_document.tsx，并复制粘贴它就好了，但每次我得到了同样的问题，这是每当我尝试使用<Head />外_document.tsx，甚至只是内_app.tsx设置一个如教程中的代码所示，标题和视口元数据显示了非常无用的错误消息（下面包括完整的stacktrace）：
TypeError: Cannot destructure property 'styles' of 'this.context' as it is null.
我在上一个项目中遇到了完全相同的问题，这就是为什么它令我感到惊讶和沮丧，因为似乎没有人遇到与我相同的问题，而且我能找到的每个教程都包含完全相同的代码，似乎不适合我。
这是我的代码：
_document.tsx
import React from "react";
import Document, { DocumentContext, DocumentInitialProps, Head, Html, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/core/styles";
import theme from "../constants/theme";
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<meta name="theme-color" content={theme.palette.primary.main} />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
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()]
}
}
}
export default MyDocument;
_app.tsx
import { CssBaseline, ThemeProvider } from "@material-ui/core";
import { Head } from "next/document";
import React from "react"
import theme from "../constants/theme";
function MyApp({ Component, pageProps }) {
React.useEffect(() => {
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);
}, []);
return (
<React.Fragment>
<Head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</React.Fragment>
)
}
export default MyApp
如果需要的话，我会很乐意提供更多信息，但是由于我不太了解问题所在，因此我真的不知道哪些部分与发布有关。
这是我得到的错误的完整stacktrace：
TypeError: Cannot destructure property 'styles' of 'this.context' as it is null.
at Head.render (E:\dev\weblore-web\.next\server\pages\_document.js:484:7)
at processChild (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3450:18)
at resolve (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
at renderToString (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
at renderPage (E:\dev\weblore-web\node_modules\next\dist\next-server\server\render.js:54:851)
at Object.ctx.renderPage (E:\dev\weblore-web\.next\server\pages\_document.js:963:28)
at Function.getInitialProps (E:\dev\weblore-web\.next\server\pages\_document.js:310:19)
at Function.getInitialProps (E:\dev\weblore-web\.next\server\pages\_document.js:971:85)
at loadGetInitialProps (E:\dev\weblore-web\node_modules\next\dist\next-server\lib\utils.js:5:101)
at renderToHTML (E:\dev\weblore-web\node_modules\next\dist\next-server\server\render.js:54:1142) at async E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:107:97
at async E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:100:142
at async DevServer.renderToHTMLWithComponents (E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:132:387)
at async DevServer.renderToHTML (E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:133:522)
Head需要从“ next / head”而不是“ next / document”导入。请参阅文档：https : //nextjs.org/docs/api-reference/next/head
但是，这一次您必须使用默认导入：
import Head from "next/head";
_app.tsx需要相应地进行调整：
import { CssBaseline, ThemeProvider } from "@material-ui/core";
import Head from "next/head";
import React from "react"
import theme from "../constants/theme";
function MyApp({ Component, pageProps }) {
React.useEffect(() => {
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);
}, []);
return (
<React.Fragment>
<Head>
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</React.Fragment>
)
}
export default MyApp
我也遇到了这个问题，因为WebStorm中的代码完成提示错误的包含。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句