Next.js: TypeError: null의 '_documentProps' 속성을 읽을 수 없습니다.

에 만든 2019년 12월 06일 · 10코멘트 · 출처: vercel/next.js

버그 신고

버그 설명

TypeError: Cannot read property '_documentProps' of null

이것은 Head 의 render 메소드에서 발생합니다:

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

개발 중에는 잘 작동하지만 빌드 버전을 빌드하고 실행할 때 충돌합니다.

재현하기 위해

동작을 재현하는 단계는 코드 스니펫 또는 저장소를 제공하세요.

이것이 내 설정과 관련된 것일 수 있음을 이해합니다. 저는 typescript와 nextjs를 사용하고 있습니다.

예상되는 행동

오류가 발생하지 않았습니다.

시스템 정보

OS: 맥OS
브라우저(해당되는 경우) 크롬(모두)
Next.js 버전: 9.1.4

추가 컨텍스트

앱은 9.0.4에서 잘 작동하지만 취약성 경고를 표시하는 종속성이 있습니다. 큰 업데이트가되어서는 안됩니다.

문제는 항상 페이지/_document의 문서 내부 첫 번째 요소에 표시됩니다. 이 경우 "Head"이지만 Head를 제거하면 "Main"에 표시됩니다. 어떻게 든이 컨텍스트가 채워지지 않습니다. 빌드 할 때만 (개발 중)

이것은 내 _document 페이지의 getInitialProps입니다.

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

출처

joaogarin

가장 유용한 댓글

나는 이것이 관련이 있는지 확실하지 않은 동일한 문제에 직면했습니다. 하지만 문제는 부적절한 수입으로 인해 발생했습니다.

대신 import { Head } from 'next/document' , 그것이 있어야 import Head from 'next/head' 누군가가 가져 오려고하면, Head , 그리고 개별 페이지 내에서 _document 에 명시된 바와 같이, 문서 .

phoenisx 에 2020년 02월 09일

👍108 ❤31 🎉29 🚀17 😄6

모든 10 댓글

재생산이 제공되지 않기 때문에 귀하를 돕는 / 그것이 무엇과 관련된 것인지 말하는 것은 기본적으로 불가능합니다.

timneutkens 에 2019년 12월 08일

👀1

당신은 아폴로를 사용하고 있습니까?

timneutkens 에 2019년 12월 08일

_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로 업데이트하는 동안 다른 문제가 발생합니다..이것은 어떤 이유로 사소하지 않은 업데이트인 것 같습니다.

어쨌든 포인터 주셔서 감사합니다.

재생산 리포지토리 없이는 돕기가 어렵다는 것을 알고 있지만 때때로 다른 이유로 팝업이 표시되고 Hello World 시나리오에서 자신을 표시하지 않습니다. 물론 앱에는 원치 않는 것을 발송할 수 있는 다른 코드가 있습니다. 항상 가능합니다. 항상 가능한 한 많은 정보를 디버그하고 제공하려고 노력합니다.

모든 도움을 주셔서 감사합니다 선생님. 당신은 굉장하다 👍

joaogarin 에 2019년 12월 09일

나는 이것이 관련이 있는지 확실하지 않은 동일한 문제에 직면했습니다. 하지만 문제는 부적절한 수입으로 인해 발생했습니다.

phoenisx 에 2020년 02월 09일

👍108 ❤31 🎉29 🚀17 😄6

@Shub1427 미인

andresmejia3 에 2020년 03월 06일

🎉3 😄1

@Shub1427 ❤️

Nases 에 2020년 03월 09일

👍3 👎1

와우, 이것은 거의 2일 동안 갇혀 있던 저를 구했습니다. 나는 이것이 확실히 더 잘 문서화되어야 한다고 생각합니다.

adrianmcli 에 2020년 04월 05일

import Head from 'next/head' 사용하는 사람은 모든 태그가 서버가 아닌 클라이언트에서만 렌더링되는 것처럼 보입니다.

xe4me 에 2020년 07월 20일

이 오류가 발생합니다.
Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
배포 시 내 _document.js에 있지만 로컬에서 제대로 작동합니다.

sibasishm 에 2020년 08월 31일

@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 Type error: Property 'files' does not exist on type 'DocumentProps'. 또 다른 오류가 발생합니다.

deadcoder0904 에 2020년 09월 13일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급