Next.js: TypeError: невозможно прочитать свойство _documentProps, имеющее значение null

Созданный на 6 дек. 2019  ·  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
  • Браузер (если есть) хром (любой)
  • Версия Next.js: 9.1.4

Дополнительный контекст

Приложение отлично работает в 9.0.4, но у меня есть зависимость, которая выдает предупреждение об уязвимости ... и не должно быть большим обновлением (я предполагал).

Проблема всегда проявляется в первом элементе внутри документа в pages / _document. В данном случае это «Голова», но если я удалю ее, она появится в «Основном». Каким-то образом этот контекст не заполняется .. только при сборке (работает в разработке)

Это getInitialProps моей страницы _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
Источник
picture joaogarin

Самый полезный комментарий

Я столкнулся с той же проблемой, не уверен, связано ли это. Но проблема возникла из-за неправильного импорта.

Вместо import { Head } from 'next/document' это должно быть import Head from 'next/head' , если кто-то пытается импортировать Head внутри отдельных страниц, а не в _document , как указано в документации .

picture phoenisx 9 февр. 2020
👍108 ❤31 🎉29 🚀17 😄6

Все 10 Комментарий

В принципе невозможно помочь вам / сказать, к чему это относится, поскольку воспроизведение не предусмотрено.

timneutkens picture timneutkens 8 дек. 2019
👀1

Вы используете Аполлон?

timneutkens picture timneutkens 8 дек. 2019

Кажется, исправили это с помощью некоторого рефакторинга кода _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 .. По какой-то причине это кажется нетривиальным обновлением.

В любом случае спасибо за указатели.

Я знаю, что трудно помочь без репозитория воспроизведения, но иногда выдает всплывающее окно по другим причинам и не показывает себя в сценарии приветствия. У приложения, конечно же, есть другой код, который может отправлять нежелательные вещи ... что всегда возможно. стараюсь отлаживать и всегда предоставлять как можно больше информации.

Спасибо за помощь, сэр. ты классный 👍

joaogarin picture joaogarin 9 дек. 2019

Я столкнулся с той же проблемой, не уверен, связано ли это. Но проблема возникла из-за неправильного импорта.

Вместо import { Head } from 'next/document' это должно быть import Head from 'next/head' , если кто-то пытается импортировать Head внутри отдельных страниц, а не в _document , как указано в документации .

phoenisx picture phoenisx 9 февр. 2020
👍108 ❤31 🎉29 🚀17 😄6

@ Shub1427 Красавица, спасибо!

andresmejia3 picture andresmejia3 6 мар. 2020
🎉3 😄1

@ Shub1427 ❤️

Nases picture Nases 9 мар. 2020
👍3 👎1

Вау, это спасло меня после почти 2 дней застревания. Я думаю, что это определенно следует задокументировать.

adrianmcli picture adrianmcli 5 апр. 2020

Для тех, кто использует import Head from 'next/head' обратите внимание, что все теги, похоже, отображаются только на клиенте, а не на сервере.

xe4me picture xe4me 20 июл. 2020

Я получаю эту ошибку
Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
в моем _document.js при развертывании, но он отлично работает локально.

sibasishm picture sibasishm 31 авг. 2020

@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 :(

deadcoder0904 picture deadcoder0904 13 сент. 2020
Была ли эта страница полезной?
0 / 5 - 0 рейтинги

Смежные вопросы

nvartolomei picture nvartolomei  ·  78Комментарии
timneutkens picture timneutkens  ·  72Комментарии
baldurh picture baldurh  ·  74Комментарии
Vista1nik picture Vista1nik  ·  55Комментарии
timneutkens picture timneutkens  ·  250Комментарии