Fatal编程技术网
  • reactjs/
  • Reactjs 在_文档之外使用Next.js Head组件会使页面崩溃

Reactjs 在_文档之外使用Next.js Head组件会使页面崩溃

reactjs typescript material-ui next.js

Reactjs 在_文档之外使用Next.js Head组件会使页面崩溃,reactjs,typescript,material-ui,next.js,Reactjs,Typescript,Material Ui,Next.js,我正在尝试将Next.js与Typescript和materialui一起使用。关于如何设置Next.js以使用Material UI的在线教程数不胜数，而且所有这些教程似乎都分别在\u document.js和\u app.js中使用了完全相同的代码 我尝试过将\u document.js中的代码稍加修改为typescript\u document.tsx，然后复制粘贴它，但每次我都会遇到同样的问题，那就是每当我尝试在\u document.tsx之外使用\u app.tsx来设置标题和视口元

我正在尝试将Next.js与Typescript和materialui一起使用。关于如何设置Next.js以使用Material UI的在线教程数不胜数，而且所有这些教程似乎都分别在
\u document.js
和
\u app.js
中使用了完全相同的代码

我尝试过将
\u document.js
中的代码稍加修改为typescript
\u document.tsx
，然后复制粘贴它，但每次我都会遇到同样的问题，那就是每当我尝试在
\u document.tsx
之外使用
\u app.tsx
来设置标题和视口元时，正如教程中的代码所示，我收到一条非常没有帮助的错误消息（下面包括完整的stacktrace）：


TypeError:无法对“this.context”的属性“styles”进行分解，因为它为空。

在我以前的一个项目中，我遇到了完全相同的问题，这就是为什么我感到惊讶和沮丧的原因，似乎没有人和我有相同的问题，而且我能找到的每一个教程都包含完全相同的代码，但似乎对我不起作用

这是我的密码：


\u document.tsx


从“React”导入React；
从“next/Document”导入文档，{DocumentContext，DocumentInitialProps，Head，Html，Main，NextScript}；
从“@material ui/core/styles”导入{ServerStyleSheets}”；
从“./constants/theme”导入主题；
类MyDocument扩展了文档{
render（）{
返回(
);
}
静态异步getInitialProps（ctx:DocumentContext）：承诺{
const sheets=新服务器样式表（）；
const originalRenderPage=ctx.renderPage；
ctx.renderPage=（）=>原始renderPage({
enhanceApp:（应用）=>（道具）=>sheets.collect（）
});
const initialProps=wait Document.getInitialProps（ctx）；
返回{
…初始道具，
样式：[…React.Children.toArray（initialProps.styles），sheets.getStyleElement（）]
}
}
}
导出默认MyDocument；



\u app.tsx


从“@material ui/core”导入{CssBaseline，ThemeProvider}”；
从“next/document”导入{Head}；
从“React”导入React
从“./constants/theme”导入主题；
函数MyApp（{Component，pageProps}）{
React.useffect（（）=>{
const jssStyles=document.querySelector（“jss服务器端”）；
if（jssStyles）jssStyles.parentElement.removeChild（jssStyles）；
}, []);
返回(
标题
)
}
导出默认MyApp


如果需要的话，我很乐意提供更多，但因为我不太明白问题是什么，所以我不知道哪些部分与本文相关

这是我得到的错误的完整堆栈跟踪：


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”
导入它们，而不是从
“下一个/document”
头需要从“下一个/head”而不是“下一个/document”导入。见以下文档：

但是，这次您必须使用默认导入：


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



从“@material ui/core”导入{CssBaseline，ThemeProvider}”；
从“下一个/Head”导入Head；
从“React”导入React
从“./constants/theme”导入主题；
函数MyApp（{Component，pageProps}）{
React.useffect（（）=>{
const jssStyles=document.querySelector（“jss服务器端”）；
if（jssStyles）jssStyles.parentElement.removeChild（jssStyles）；
}, []);
返回(
标题
)
}
导出默认MyApp


我也遇到过这个问题，因为WebStorm中的代码完成提示了错误的include