Next.js: TypeError: Não é possível ler a propriedade '_documentProps' de nulo

Criado em 6 dez. 2019 · 10Comentários · Fonte: vercel/next.js

Relatório de erro

Descreva o bug

TypeError: Cannot read property '_documentProps' of null

Isso é lançado no método de renderização de Head :

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

Funciona bem no desenvolvimento, mas ao compilar e executar a versão de compilação, ele trava

Reproduzir

Etapas para reproduzir o comportamento, forneça snippets de código ou um repositório:

Eu entendo que isso pode ser algo relacionado à minha configuração. Estou usando o texto datilografado e o nextjs.

Comportamento esperado

Nenhum erro lançado.

Informação do sistema

OS: macOS
Chrome (se aplicável) do navegador (qualquer)
Versão do Next.js: 9.1.4

Contexto adicional

O aplicativo funciona bem no 9.0.4, mas tenho uma dependência que está lançando um aviso de vulnerabilidade ... e não deve ser uma grande atualização (presumi).

O problema sempre se mostra no primeiro elemento dentro do Documento em pages / _document. Neste caso é "Head", mas se eu remover Head, ele se mostra em "Main". De alguma forma, este contexto não está sendo preenchido ... apenas durante a construção (obras em desenvolvimento)

Este é o getInitialProps da minha página _document:

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

Fonte

joaogarin

Comentários muito úteis

Eu enfrentei o mesmo problema, não tenho certeza se isso está relacionado. Mas, o problema foi causado devido à importação indevida.

Em vez de import { Head } from 'next/document' , deve ser import Head from 'next/head' , se alguém estiver tentando importar Head dentro de páginas individuais, e não em _document , conforme declarado nos documentos .

phoenisx em 9 fev. 2020

👍108 ❤31 🎉29 🚀17 😄6

Todos 10 comentários

É basicamente impossível ajudá-lo / dizer a que se refere, pois nenhuma reprodução é fornecida.

timneutkens em 8 dez. 2019

👀1

Você está usando o Apollo?

timneutkens em 8 dez. 2019

Parece ter corrigido isso com alguma refatoração no código _document.tsx:

const originalRenderPage = context.renderPage;
...
    try {
      context.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await BaseDocument.getInitialProps(context);
...

perto do que está nos exemplos.

Encontrando outros problemas durante a atualização de 9.0.4 para 9.1.4 ... Esta parece ser uma atualização não trivial por algum motivo.

Obrigado pelas dicas de qualquer maneira.

Eu sei que é difícil ajudar sem algum repo de reprodução, mas às vezes os problemas aparecem por outros motivos e não aparecem em um cenário de hello world. O aplicativo tem, é claro, outro código que pode despachar coisas indesejadas ... isso, ofc, sempre é possível. tentando depurar e fornecer sempre o máximo de informações possível.

Obrigado por toda a ajuda senhor. você é demais 👍

joaogarin em 9 dez. 2019

Eu enfrentei o mesmo problema, não tenho certeza se isso está relacionado. Mas, o problema foi causado devido à importação indevida.

phoenisx em 9 fev. 2020

👍108 ❤31 🎉29 🚀17 😄6

@ Shub1427 Você é uma beleza, obrigado!

andresmejia3 em 6 mar. 2020

🎉3 😄1

@ Shub1427 ❤️

Nases em 9 mar. 2020

👍3 👎1

Uau, isso me salvou depois de quase 2 dias preso. Acho que isso definitivamente deveria ser melhor documentado.

adrianmcli em 5 abr. 2020

Para qualquer um usando import Head from 'next/head' observe que todas as tags parecem ser renderizadas apenas no cliente, NÃO no servidor

xe4me em 20 jul. 2020

Estou recebendo este erro
Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
no meu _document.js na implantação, mas funciona bem localmente.

sibasishm em 31 ago. 2020

@sibasishm Enfrentei esse erro e a solução foi fazer this.context vez de this.context._documentProps .

Para mais informações → https://github.com/vercel/next.js/discussions/16162

Mas estou recebendo outro erro agora Type error: Property 'files' does not exist on type 'DocumentProps'. porque estou fazendo const { assetPrefix, files } = this.context agora :(