CODEWITHSUNDEEP
reactjstypescriptmaterial-uinext.js
Phantom
Phantom

Reputation: 323

Using the Next.js Head component outside of _document crashes the page

I am trying to use Next.js with Typescript and Material UI. There are countless tutorials online on how to set up Next.js to work with Material UI, and all of them seem to be using exactly the same code in _document.js and _app.js respectively.

I've tried both adapting the code in _document.js a tiny bit into a typescript _document.tsx, and copy-pasting it as-is, but everytime I get the same issue, which is that whenever I try to use <Head /> outside of _document.tsx, even just within _app.tsx to set a title and viewport meta, as the code in the tutorials suggests, I get a very much non-helpful error message (full stacktrace included below):

TypeError: Cannot destructure property 'styles' of 'this.context' as it is null.

I had the exact same issue in a previous project of mine, which is why it both surprises and frustrates me that there seems to be no one having the same problem as me, and that every single tutorial I could find includes the exact same code which doesn't seem to work for me.

Here is my code:

_document.tsx

import React from "react";
import Document, { DocumentContext, DocumentInitialProps, Head, Html, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/core/styles";
import theme from "../constants/theme";

class MyDocument extends Document {
    render() {
        return (
            <Html lang="en">
                <Head>
                    <meta name="theme-color" content={theme.palette.primary.main} />
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        );
    }

    static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
        const sheets = new ServerStyleSheets();
        const originalRenderPage = ctx.renderPage;

        ctx.renderPage = () => originalRenderPage({
            enhanceApp: (App) => (props) => sheets.collect(<App {...props} />)
        });

        const initialProps = await Document.getInitialProps(ctx);

        return {
            ...initialProps,
            styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
        }
    }
}

export default MyDocument;

_app.tsx

import { CssBaseline, ThemeProvider } from "@material-ui/core";
import { Head } from "next/document";
import React from "react"
import theme from "../constants/theme";

function MyApp({ Component, pageProps }) {
  React.useEffect(() => {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </React.Fragment>
  )
}

export default MyApp

I'll gladly provide more if needed, but since I don't really understand what the problem is, I don't really know which parts are relevant to post here.

This is the full stacktrace for the error I'm getting:

TypeError: Cannot destructure property 'styles' of 'this.context' as it is null.
    at Head.render (E:\dev\weblore-web\.next\server\pages\_document.js:484:7)
    at processChild (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3450:18)
    at resolve (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (E:\dev\weblore-web\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at renderPage (E:\dev\weblore-web\node_modules\next\dist\next-server\server\render.js:54:851)   
    at Object.ctx.renderPage (E:\dev\weblore-web\.next\server\pages\_document.js:963:28)
    at Function.getInitialProps (E:\dev\weblore-web\.next\server\pages\_document.js:310:19)
    at Function.getInitialProps (E:\dev\weblore-web\.next\server\pages\_document.js:971:85)
    at loadGetInitialProps (E:\dev\weblore-web\node_modules\next\dist\next-server\lib\utils.js:5:101)
    at renderToHTML (E:\dev\weblore-web\node_modules\next\dist\next-server\server\render.js:54:1142)    at async E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:107:97     
    at async E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:100:142    
    at async DevServer.renderToHTMLWithComponents (E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:132:387)
    at async DevServer.renderToHTML (E:\dev\weblore-web\node_modules\next\dist\next-server\server\next-server.js:133:522)

Upvotes: 12

Views: 7773

Answers (2)

J R
J R

Reputation: 689

Head needs to be imported from "next/head" instead of "next/document". See here in the docs: https://nextjs.org/docs/api-reference/next/head

However, this time you have to use the default import:

import Head from "next/head";

The _app.tsx needs to be adjusted accordingly:

import { CssBaseline, ThemeProvider } from "@material-ui/core";
import Head from "next/head";
import React from "react"
import theme from "../constants/theme";

function MyApp({ Component, pageProps }) {
  React.useEffect(() => {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles) jssStyles.parentElement.removeChild(jssStyles);
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} />
      </ThemeProvider>
    </React.Fragment>
  )
}

export default MyApp

I've had this issue as well, since code completion in WebStorm suggested the wrong include.

Upvotes: 29

Phantom
Phantom

Reputation: 323

It turns out that when using heads outside the document definition, you need to import them from "next/head" instead of "next/document".

Upvotes: 10

Related Questions