Next.js: TypeError: Eigenschaft '_documentProps' von null kann nicht gelesen werden

Erstellt am 6. Dez. 2019 · 10Kommentare · Quelle: vercel/next.js

Fehlerbericht

Beschreibe den Fehler

TypeError: Cannot read property '_documentProps' of null

Dies wird in die Rendermethode von Head geworfen:

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

Funktioniert in der Entwicklung gut, aber beim Erstellen und Ausführen der Build-Version stürzt sie ab

Fortpflanzen

Schritte zum Reproduzieren des Verhaltens, bitte Code-Snippets oder ein Repository bereitstellen:

Ich verstehe, dass dies etwas mit meinem Setup zu tun haben könnte. Ich verwende Typoskript und nextjs.

Erwartetes Verhalten

Kein Fehler geworfen.

System Information

Betriebssystem: macOS
Browser (falls zutreffend) Chrome (beliebig)
Version von Next.js: 9.1.4

Zusätzlicher Kontext

App funktioniert in 9.0.4 gut, aber ich habe eine Abhängigkeit, die eine Schwachstellenwarnung ausgibt ... und sollte kein großes Update sein (ich nahm an).

Das Problem zeigt sich immer im ersten Element innerhalb des Dokuments in Seiten/_Dokument. In diesem Fall ist es "Head", aber wenn ich Head entferne, wird es in "Main" angezeigt. Irgendwie wird dieser Kontext nicht aufgefüllt..nur beim Bauen (funktioniert in Entwicklung)

Dies ist die getInitialProps meiner _document-Seite:

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

Quelle

joaogarin

Hilfreichster Kommentar

Ich hatte das gleiche Problem, bin mir nicht sicher, ob das zusammenhängt. Das Problem wurde jedoch durch einen unsachgemäßen Import verursacht.

Anstelle von import { Head } from 'next/document' sollte es import Head from 'next/head' , wenn jemand versucht, Head in einzelne Seiten zu importieren und nicht in _document , wie in den Dokumenten angegeben .

phoenisx am 9. Feb. 2020

👍108 ❤31 🎉29 🚀17 😄6

Alle 10 Kommentare

Es ist im Grunde unmöglich, Ihnen zu helfen / zu sagen, worauf es sich bezieht, da keine Reproduktion bereitgestellt wird.

timneutkens am 8. Dez. 2019

👀1

Benutzt du Apollo?

timneutkens am 8. Dez. 2019

Scheint dies mit einer Umgestaltung des _document.tsx-Codes behoben zu haben:

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

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

nah an den Beispielen.

Beim Aktualisieren von 9.0.4 auf 9.1.4 treten andere Probleme auf. Dies scheint aus irgendeinem Grund ein nicht triviales Update zu sein.

Danke trotzdem für die Hinweise.

Ich weiß, dass es schwierig ist, ohne ein Reproduktionsrepo zu helfen, aber manchmal gibt es aus anderen Gründen ein Popup und zeigen sich nicht in einem Hallo-Welt-Szenario. app hat natürlich anderen Code, der unerwünschte Dinge versenden könnte..das ist immer möglich. versuchen zu debuggen und immer so viele Informationen wie möglich bereitzustellen.

Vielen Dank für all die Hilfe, Herr. du bist toll

joaogarin am 9. Dez. 2019

Ich hatte das gleiche Problem, bin mir nicht sicher, ob das zusammenhängt. Das Problem wurde jedoch durch einen unsachgemäßen Import verursacht.

phoenisx am 9. Feb. 2020

👍108 ❤31 🎉29 🚀17 😄6

@Shub1427 Du bist eine Schönheit, danke!

andresmejia3 am 6. März 2020

🎉3 😄1

@Shub1427 ️

Nases am 9. März 2020

👍3 👎1

Wow, das hat mich gerettet, nachdem ich fast 2 Tage festgefahren war. Ich denke, das sollte auf jeden Fall besser dokumentiert werden.

adrianmcli am 5. Apr. 2020

Für jeden, der import Head from 'next/head' beachten Sie, dass alle Tags anscheinend nur im Client gerendert werden, NICHT auf dem Server

xe4me am 20. Juli 2020

Ich bekomme diesen Fehler
Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
in meinem _document.js bei der Bereitstellung, aber es funktioniert lokal einwandfrei.

sibasishm am 31. Aug. 2020

@sibasishm Ich war mit diesem Fehler konfrontiert und die Lösung bestand darin, this.context anstelle von this.context._documentProps zu tun.

Für weitere Informationen → https://github.com/vercel/next.js/discussions/16162

Aber ich bin immer einen anderen Fehler jetzt Type error: Property 'files' does not exist on type 'DocumentProps'. , wie ich tue const { assetPrefix, files } = this.context jetzt :(

deadcoder0904 am 13. Sept. 2020

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen