TypeError: Cannot read property '_documentProps' of null
这在Head
的渲染方法中被抛出:
render() {
var {
styles,
ampPath,
inAmpMode,
assetPrefix,
hybridAmp,
canonicalBase,
__NEXT_DATA__,
dangerousAsPath,
headTags
} = this.context._documentProps;
在开发中运行良好,但在构建和运行构建版本时崩溃
重现行为的步骤,请提供代码片段或存储库:
我知道这可能与我的设置有关。 我正在使用打字稿和 nextjs。
没有抛出错误。
应用程序在 9.0.4 中运行良好,但我有一个依赖项会抛出漏洞警告......并且不应该是一个大更新(我假设)。
这个问题总是出现在 pages/_document 中 Document 的第一个元素中。 在这种情况下,它是“头部”,但如果我移除头部,那么它会显示在“主要”中。 不知何故,这个上下文没有被填充......只有在构建时(正在开发中)
这是我的 _document 页面的 getInitialProps :
public static async getInitialProps(context: CustomDocumentContext) {
const sheet = new ServerStyleSheet();
const renderPage = context.renderPage;
try {
context.renderPage = () => {
const enhancer = App => props => {
return sheet.collectStyles(<App {...props} />);
};
return renderPage(enhancer);
};
const initialProps: any = await BaseDocument.getInitialProps(context);
const { language, locale, localeData } = context.req;
return {
...initialProps,
language,
locale,
localeData,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
};
} finally {
// @ts-ignore
sheet.seal();
}
}
由于没有提供复制,基本上不可能帮助您/说出它的相关内容。
你在用阿波罗吗?
似乎通过对 _document.tsx 代码进行了一些重构来解决这个问题:
const originalRenderPage = context.renderPage;
...
try {
context.renderPage = () =>
originalRenderPage({
enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
});
const initialProps = await BaseDocument.getInitialProps(context);
...
接近示例中的内容。
虽然从 9.0.4 更新到 9.1.4,但遇到了其他问题......出于某种原因,这似乎是一个重要的更新。
无论如何感谢您的指点。
我知道没有一些复制存储库很难提供帮助,但有时会因为其他原因而发出弹出窗口,并且不会在 hello world 场景中显示自己。 应用程序当然有其他代码可以调度不需要的东西......这总是可能的。 尝试调试并始终提供尽可能多的信息。
谢谢先生的所有帮助。 你真棒👍
我遇到了同样的问题,不确定这是否相关。 但是,该问题是由于导入不当引起的。
如果有人试图在单个页面中导入Head
而不是import { Head } from 'next/document'
,它应该是import Head from 'next/head'
,而不是在_document
,如docs 所述。
@Shub1427你是个美女,谢谢!
@Shub1427 ❤️
哇,这在被卡住了将近 2 天后救了我。 我认为这绝对应该更好地记录下来。
对于使用import Head from 'next/head'
任何人,请注意所有标签似乎只在客户端呈现,而不是在服务器中呈现
我收到此错误Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
在我的 _document.js 部署中,但它在本地工作正常。
@sibasishm我遇到了那个错误,解决方案是执行this.context
而不是this.context._documentProps
。
欲了解更多信息 → https://github.com/vercel/next.js/discussions/16162
但是我现在遇到另一个错误Type error: Property 'files' does not exist on type 'DocumentProps'.
因为我现在正在做const { assetPrefix, files } = this.context
:(
最有用的评论
我遇到了同样的问题,不确定这是否相关。 但是,该问题是由于导入不当引起的。
如果有人试图在单个页面中导入
Head
而不是import { Head } from 'next/document'
,它应该是import Head from 'next/head'
,而不是在_document
,如docs 所述。