Next.js: TypeError: Cannot read property '_documentProps' of null

Created on 6 Dec 2019 · 10Comments · Source: vercel/next.js

Bug report

Describe the bug

TypeError: Cannot read property '_documentProps' of null

This gets thrown in the render method of Head :

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

Works fine in development but when building and running the build version it crashes

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

I understand this might be something related to my setup. I am using typescript and nextjs.

Expected behavior

No error thrown.

System information

OS: macOS
Browser (if applies) chrome (any)
Version of Next.js: 9.1.4

Additional context

App works fine in 9.0.4 but I have a depenency that is throwing a vulnerability warning..and shouldn't be a big update (I assumed).

The issue alwways shows itself in the first element inside the Document in pages/_document. In this case its "Head" but if I remove Head then it shows itself in "Main". Somehow this context is not getting populated..only when building (works in development)

This is the getInitialProps of my _document page :

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

Source

joaogarin

Most helpful comment

I faced the same issue, not sure if this is related. But, the issue was caused due to improper import.

Instead of import { Head } from 'next/document', it should be import Head from 'next/head', if anybody is trying to import Head inside individual pages, and not in _document, as stated in docs.

phoenisx on 9 Feb 2020

👍108 ❤31 🎉29 🚀17 😄6

All 10 comments

It's basically impossible to help you / say what it relates to as no reproduction is provided.

timneutkens on 8 Dec 2019

👀1

Are you using Apollo?

timneutkens on 8 Dec 2019

Seem to have fixed this with some refactor to the _document.tsx code :

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

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

close to what is in the examples.

Running into other issues though updating from 9.0.4 to 9.1.4..This seems to be a non-trivial update for some reason.

Thanks for the pointers anyway.

I know its difficult to help without some reproduction repo but sometimes issues popup for other reasons and don't show themselves in a hello world scenario. app has of course other code that could dispatch unwanted things..thats ofc always possible. trying to debug and provide as much information as possible always.

Thank you for all the help sir. you are awesome 👍

joaogarin on 9 Dec 2019

I faced the same issue, not sure if this is related. But, the issue was caused due to improper import.

phoenisx on 9 Feb 2020

👍108 ❤31 🎉29 🚀17 😄6

@Shub1427 You're a beauty, thanks!

andresmejia3 on 6 Mar 2020

🎉3 😄1

@Shub1427 ❤️

Nases on 9 Mar 2020

👍3 👎1

Wow, this saved me after almost 2 days of being stuck. I think this should definitely be better documented.

adrianmcli on 5 Apr 2020

For anyone using import Head from 'next/head' note that all the tags seem to be only rendered in the client, NOT server

xe4me on 20 Jul 2020

I am getting this error
Unhandled error during request: TypeError: Cannot destructure property 'assetPrefix' of 'this.context._documentProps' as it is undefined.
in my _document.js on deployment but it works fine locally.

sibasishm on 31 Aug 2020

@sibasishm I faced that error & the solution was to do this.context instead of this.context._documentProps.

For more info → https://github.com/vercel/next.js/discussions/16162

But I am getting another error now Type error: Property 'files' does not exist on type 'DocumentProps'. as I am doing const { assetPrefix, files } = this.context now :(