Next.js: 类型错误:无法读取 null 的属性“_documentProps”

创建于 2019-12-06  ·  10评论  ·  资料来源: vercel/next.js

错误报告

描述错误

TypeError: Cannot read property '_documentProps' of null

这在Head的渲染方法中被抛出:

render() {
    var {
      styles,
      ampPath,
      inAmpMode,
      assetPrefix,
      hybridAmp,
      canonicalBase,
      __NEXT_DATA__,
      dangerousAsPath,
      headTags
    } = this.context._documentProps;

在开发中运行良好,但在构建和运行构建版本时崩溃

再现

重现行为的步骤,请提供代码片段或存储库:

我知道这可能与我的设置有关。 我正在使用打字稿和 nextjs。

预期行为

没有抛出错误。

系统信息

  • 操作系统:macOS
  • 浏览器(如果适用)chrome(任何)
  • Next.js 版本:9.1.4

附加上下文

应用程序在 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();
    }
  }
please add a complete reproduction

最有用的评论

我遇到了同样的问题,不确定这是否相关。 但是,该问题是由于导入不当引起的。

如果有人试图在单个页面中导入Head而不是import { Head } from 'next/document' ,它应该是import Head from 'next/head' ,而不是在_document ,如docs 所述

所有10条评论

由于没有提供复制,基本上不可能帮助您/说出它的相关内容。

你在用阿波罗吗?

似乎通过对 _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 :(

此页面是否有帮助?
0 / 5 - 0 等级