fix(next): improve error for using <Html> outside of document

vercel · Jan 19, 2023 · 21e8366 · 21e8366
1 parent 9b39c79
commit 21e8366
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/packages/next/src/pages/_document.tsx b/packages/next/src/pages/_document.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode, useContext } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import {
   OPTIMIZED_FONT_PROVIDERS,
   NEXT_BUILTIN_DOCUMENT,
@@ -17,7 +17,7 @@ import { BuildManifest, getPageFiles } from '../server/get-page-files'
 import { htmlEscapeJsonString } from '../server/htmlescape'
 import isError from '../lib/is-error'
 
-import { HtmlContext } from '../shared/lib/html-context'
+import { HtmlContext, useHtmlContext } from '../shared/lib/html-context'
 import type { HtmlProps } from '../shared/lib/html-context'
 
 export { DocumentContext, DocumentInitialProps, DocumentProps }
@@ -411,7 +411,7 @@ function getFontLoaderLinks(
 export class Head extends React.Component<HeadProps> {
   static contextType = HtmlContext
 
-  context!: React.ContextType<typeof HtmlContext>
+  context!: HtmlProps
 
   getCssLinks(files: DocumentFiles): JSX.Element[] | null {
     const {
@@ -968,7 +968,7 @@ function handleDocumentScriptLoaderItems(
 export class NextScript extends React.Component<OriginProps> {
   static contextType = HtmlContext
 
-  context!: React.ContextType<typeof HtmlContext>
+  context!: HtmlProps
 
   getDynamicChunks(files: DocumentFiles) {
     return getDynamicChunks(this.context, this.props, files)
@@ -1138,7 +1138,7 @@ export function Html(
     locale,
     scriptLoader,
     __NEXT_DATA__,
-  } = useContext(HtmlContext)
+  } = useHtmlContext()
 
   docComponentsRendered.Html = true
   handleDocumentScriptLoaderItems(scriptLoader, __NEXT_DATA__, props)
@@ -1160,7 +1160,7 @@ export function Html(
 }
 
 export function Main() {
-  const { docComponentsRendered } = useContext(HtmlContext)
+  const { docComponentsRendered } = useHtmlContext()
   docComponentsRendered.Main = true
   // @ts-ignore
   return <next-js-internal-body-render-target />

diff --git a/packages/next/src/shared/lib/html-context.ts b/packages/next/src/shared/lib/html-context.ts
@@ -4,7 +4,7 @@ import type { NEXT_DATA } from './utils'
 import type { FontConfig } from '../../server/font-utils'
 import type { FontLoaderManifest } from '../../build/webpack/plugins/font-loader-manifest-plugin'
 
-import { createContext } from 'react'
+import { createContext, useContext } from 'react'
 
 export type HtmlProps = {
   __NEXT_DATA__: NEXT_DATA
@@ -46,7 +46,20 @@ export type HtmlProps = {
   fontLoaderManifest?: FontLoaderManifest
 }
 
-export const HtmlContext = createContext<HtmlProps>(null as any)
+export const HtmlContext = createContext<HtmlProps | undefined>(undefined)
 if (process.env.NODE_ENV !== 'production') {
   HtmlContext.displayName = 'HtmlContext'
 }
+
+export function useHtmlContext() {
+  const context = useContext(HtmlContext)
+
+  if (!context) {
+    throw new Error(
+      `<Html> should not be imported outside of pages/_document.\n` +
+        'Read more: https://nextjs.org/docs/messages/no-document-import-in-page'
+    )
+  }
+
+  return context
+}