Next.js: TypeError : impossible de lire la propriété '_documentProps' de null

Créé le 6 déc. 2019  ·  10Commentaires  ·  Source: vercel/next.js

Rapport d'erreur

Décrivez le bogue

TypeError: Cannot read property '_documentProps' of null

Cela est jeté dans la méthode de rendu de Head :

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

Fonctionne bien en développement, mais lors de la construction et de l'exécution de la version de construction, il se bloque

Reproduire

Étapes pour reproduire le comportement, veuillez fournir des extraits de code ou un référentiel :

Je comprends que cela puisse être lié à ma configuration. J'utilise typescript et nextjs.

Comportement prévisible

Aucune erreur renvoyée.

Informations système

  • OS : macOS
  • Navigateur (le cas échéant) chrome (n'importe lequel)
  • Version de Next.js : 9.1.4

Contexte supplémentaire

L'application fonctionne bien dans 9.0.4 mais j'ai une dépendance qui lance un avertissement de vulnérabilité... et ne devrait pas être une grosse mise à jour (je suppose).

Le problème apparaît toujours dans le premier élément à l'intérieur du document dans pages/_document. Dans ce cas, c'est "Head" mais si je supprime Head, il s'affiche dans "Main". D'une manière ou d'une autre, ce contexte n'est pas rempli.. uniquement lors de la construction (fonctionne en développement)

Voici le getInitialProps de ma page _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

Commentaire le plus utile

J'ai rencontré le même problème, je ne sais pas si c'est lié. Mais, le problème a été causé en raison d'une importation incorrecte.

Au lieu de import { Head } from 'next/document' , il devrait s'agir de import Head from 'next/head' , si quelqu'un essaie d'importer Head à l'intérieur de pages individuelles, et non dans _document , comme indiqué dans la documentation .

Tous les 10 commentaires

Il est fondamentalement impossible de vous aider / dire à quoi cela se rapporte car aucune reproduction n'est fournie.

Utilisez-vous Apollo ?

Semble avoir corrigé cela avec un refactor du code _document.tsx :

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

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

proche de ce qui est dans les exemples.

Se heurter à d'autres problèmes lors de la mise à jour de 9.0.4 à 9.1.4.. Cela semble être une mise à jour non triviale pour une raison quelconque.

Merci pour les indications en tout cas.

Je sais qu'il est difficile d'aider sans un certain repo de reproduction, mais parfois des problèmes de popup pour d'autres raisons et ne se montrent pas dans un scénario de bonjour. app a bien sûr un autre code qui pourrait envoyer des choses indésirables..c'est toujours possible. essayer de déboguer et de fournir toujours autant d'informations que possible.

Merci pour toute l'aide monsieur. tu es génial

J'ai rencontré le même problème, je ne sais pas si c'est lié. Mais, le problème a été causé en raison d'une importation incorrecte.

Au lieu de import { Head } from 'next/document' , il devrait s'agir de import Head from 'next/head' , si quelqu'un essaie d'importer Head à l'intérieur de pages individuelles, et non dans _document , comme indiqué dans la documentation .

@ Shub1427 Tu es une beauté, merci !

@Shub1427

Wow, cela m'a sauvé après presque 2 jours de blocage. Je pense que cela devrait certainement être mieux documenté.

Pour toute personne utilisant import Head from 'next/head' notez que toutes les balises semblent n'être rendues que dans le client, PAS sur le serveur

je reçois cette erreur
Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
dans mon _document.js lors du déploiement mais cela fonctionne bien localement.

@sibasishm J'ai rencontré cette erreur et la solution était de faire this.context au lieu de this.context._documentProps .

Pour plus d'informations → https://github.com/vercel/next.js/discussions/16162

Mais je reçois une autre erreur maintenant Type error: Property 'files' does not exist on type 'DocumentProps'. que je fais const { assetPrefix, files } = this.context maintenant :(

Cette page vous a été utile?
0 / 5 - 0 notes