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

[joaogarin]

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();
    }
  }

[timneutkens]

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

[timneutkens]

Are you using Apollo?

[joaogarin]

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 👍

[phoenisx]

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.

[andresmejia3]

@Shub1427 You're a beauty, thanks!

[Nases]

@Shub1427 ❤️

[adrianmcli]

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

[xe4me]

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

[sibasishm]

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.

[deadcoder0904]

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