nextjs-auth0: Error: You forgot to wrap your app in when using Head from 'next/head'

Hi,

The following error occurs when using next/head in both the index.tsx (Home) page and the _document.sx page:

_document.tsx

import createEmotionServer from '@emotion/server/create-instance';
import theme from '@theme';
import createEmotionCache from '@theme/createEmotionCache';
import Document, { Head, Html, Main, NextScript } from 'next/document';
import * as React from 'react';

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head key="document-head">
          {/* PWA primary color */}
          <meta name="theme-color" content={theme.palette.primary.main} />
          <link rel="preconnect" href="https://fonts.googleapis.com" />
          <link
            rel="preconnect"
            href="https://fonts.gstatic.com"
            crossOrigin="true"
          />
          <link
            href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
          <div id="snackbar-root"></div>
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  const originalRenderPage = ctx.renderPage;

  // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
  // However, be aware that it can have global side effects.
  const cache = createEmotionCache();
  const { extractCriticalToChunks } = createEmotionServer(cache);

  ctx.renderPage = () =>
    originalRenderPage({
      // eslint-disable-next-line react/display-name
      enhanceApp: (App: any) => (props) =>
        <App emotionCache={cache} {...props} />,
    });

  const initialProps = await Document.getInitialProps(ctx);
  // This is important. It prevents emotion to render invalid HTML.
  // See https://github.com/mui-org/material-ui/issues/26561#issuecomment-855286153
  const emotionStyles = extractCriticalToChunks(initialProps.html);
  const emotionStyleTags = emotionStyles.styles.map((style) => (
    <style
      data-emotion={`${style.key} ${style.ids.join(' ')}`}
      key={style.key}
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML={{ __html: style.css }}
    />
  ));

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [
      ...React.Children.toArray(initialProps.styles),
      ...emotionStyleTags,
    ],
  };
};

_app.tsx

import '../styles/globals.css';

import { UserProvider } from '@auth0/nextjs-auth0';
import { AppProps } from 'next/app';

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
};

export default MyApp;

index.tsx

import { NextPage } from 'next';
import Head from 'next/head';
import React, { Fragment } from 'react';

const HomePage: NextPage = () => {
  return (
    <Fragment>
      <Head>
        <title>Home Page</title>
      </Head>
      <div>Home Page</div>
    </Fragment>
  );
};

export default HomePage;

Upon removing the Head component from either the index.tsx or the _document.tsx page the error goes away. When using it on both pages the error shows up when refreshing the page.

Thank you

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 18 (4 by maintainers)

Most upvoted comments

I had the same issue and rm -rf node_modules and cache clean did a job

+16

pawelmiklas on Jan 31, 2022

I’m facing the same issue

charanjit-singh on Jun 27, 2023

+2, this is still happening

Lazercat on Sep 30, 2023

@Widcket @adamjmcgrath Hello! I was experiencing this issue on my own app, and followed the instructions to try to repro on the sample app. I did so and am seeing the issue there as well. I’ve simply cloned, yarn installd, changed it to run on port 4000 (to match my Auth0 creds), and added my Auth0 info.

Let me know if I’m missing something / if there’s a fix! 🙇‍♀️ Screenshot 2023-09-08 at 11 45 37 AM

sranso on Sep 11, 2023

+1, I have been having this issue for ages now, my console is filled with this error. I do not wish to downgrade node nor to change the way I use <Head />. @Widcket I do think this is an issue with the SDK: it shouldn’t log an error AND work normally at the same time, this is very confusing

Alarid on Feb 16, 2023

Having this issue with node v18.15.0 and Next.js v13.3.0

subnetmarco on Apr 13, 2023