Next.js: TypeError: Tidak dapat membaca properti '_documentProps' dari null

Dibuat pada 6 Des 2019 · 10Komentar · Sumber: vercel/next.js

Laporan bug

Jelaskan bugnya

TypeError: Cannot read property '_documentProps' of null

Ini dilemparkan ke dalam metode render Head :

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

Berfungsi dengan baik dalam pengembangan tetapi ketika membangun dan menjalankan versi build, crash

Untuk Mereproduksi

Langkah-langkah untuk mereproduksi perilaku, berikan cuplikan kode atau repositori:

Saya mengerti ini mungkin sesuatu yang terkait dengan pengaturan saya. Saya menggunakan TypeScript dan nextjs.

Perilaku yang diharapkan

Tidak ada kesalahan yang dilemparkan.

Sistem Informasi

OS: macOS
Browser (jika berlaku) chrome (apa saja)
Versi Next.js: 9.1.4

Konteks tambahan

Aplikasi berfungsi dengan baik di 9.0.4 tetapi saya memiliki ketergantungan yang memberikan peringatan kerentanan..dan seharusnya tidak menjadi pembaruan besar (saya berasumsi).

Masalah selalu muncul dengan sendirinya di elemen pertama di dalam Dokumen di pages/_document. Dalam hal ini "Kepala" tetapi jika saya menghapus Kepala maka itu menunjukkan dirinya di "Utama". Entah bagaimana konteks ini tidak terisi..hanya ketika membangun (berfungsi dalam pengembangan)

Ini adalah getInitialProps dari halaman _document saya :

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

Sumber

joaogarin

Komentar yang paling membantu

Saya menghadapi masalah yang sama, tidak yakin apakah ini terkait. Tapi, masalah itu disebabkan karena impor yang tidak tepat.

Alih-alih import { Head } from 'next/document' , seharusnya import Head from 'next/head' , jika ada yang mencoba mengimpor Head di dalam halaman individual, dan bukan di _document , seperti yang dinyatakan dalam docs .

phoenisx pada 9 Feb 2020

👍108 ❤31 🎉29 🚀17 😄6

Semua 10 komentar

Pada dasarnya tidak mungkin untuk membantu Anda / mengatakan apa yang terkait dengannya karena tidak ada reproduksi yang disediakan.

timneutkens pada 8 Des 2019

👀1

Apakah Anda menggunakan Apollo?

timneutkens pada 8 Des 2019

Tampaknya telah memperbaikinya dengan beberapa refactor ke kode _document.tsx :

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

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

dekat dengan apa yang ada dalam contoh.

Mengalami masalah lain meskipun memperbarui dari 9.0.4 ke 9.1.4.. Ini tampaknya menjadi pembaruan yang tidak sepele untuk beberapa alasan.

Terima kasih atas petunjuknya.

Saya tahu sulit untuk membantu tanpa repo reproduksi tetapi terkadang mengeluarkan popup karena alasan lain dan tidak menunjukkan diri mereka dalam skenario hello world. aplikasi tentu saja memiliki kode lain yang dapat mengirimkan hal-hal yang tidak diinginkan..itu selalu mungkin. mencoba untuk men-debug dan memberikan informasi sebanyak mungkin selalu.

Terima kasih atas semua bantuannya Pak. kamu luar biasa 👍

joaogarin pada 9 Des 2019

Saya menghadapi masalah yang sama, tidak yakin apakah ini terkait. Tapi, masalah itu disebabkan karena impor yang tidak tepat.

phoenisx pada 9 Feb 2020

👍108 ❤31 🎉29 🚀17 😄6

@Shub1427 Anda cantik, terima kasih!

andresmejia3 pada 6 Mar 2020

🎉3 😄1

@Shub1427 ❤️

Nases pada 9 Mar 2020

👍3 👎1

Wow, ini menyelamatkan saya setelah hampir 2 hari terjebak. Saya pikir ini pasti harus didokumentasikan dengan lebih baik.

adrianmcli pada 5 Apr 2020

Untuk siapa pun yang menggunakan import Head from 'next/head' perhatikan bahwa semua tag tampaknya hanya dirender di klien, BUKAN server

xe4me pada 20 Jul 2020

Saya mendapatkan kesalahan ini
Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
di _document.js saya pada penerapan tetapi berfungsi dengan baik secara lokal.

sibasishm pada 31 Agu 2020

@sibasishm saya menghadapi kesalahan itu & solusinya adalah melakukan this.context alih-alih this.context._documentProps .

Untuk info lebih lanjut → https://github.com/vercel/next.js/discussions/16162

Tapi saya mendapatkan kesalahan lain sekarang Type error: Property 'files' does not exist on type 'DocumentProps'. seperti yang saya lakukan const { assetPrefix, files } = this.context sekarang :(