Revert "Root layout head not required (#41621)"

This reverts commit bdc53ef.
vercel · Dec 2, 2022 · ce79946 · ce79946
1 parent b62ea9e
commit ce79946
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/packages/next/client/components/react-dev-overlay/internal/container/RootLayoutError.tsx b/packages/next/client/components/react-dev-overlay/internal/container/RootLayoutError.tsx
@@ -14,7 +14,7 @@ export type RootLayoutErrorProps = { missingTags: string[] }
 export const RootLayoutError: React.FC<RootLayoutErrorProps> =
   function BuildError({ missingTags }) {
     const message =
-      'Please make sure to include the following tags in your root layout: <html>, <body>.\n\n' +
+      'Please make sure to include the following tags in your root layout: <html>, <head>, <body>.\n\n' +
       `Missing required root layout tag${
         missingTags.length === 1 ? '' : 's'
       }: ` +

diff --git a/packages/next/server/node-web-streams-helper.ts b/packages/next/server/node-web-streams-helper.ts
@@ -288,15 +288,19 @@ export function createRootLayoutValidatorStream(
   getTree: () => FlightRouterState
 ): TransformStream<Uint8Array, Uint8Array> {
   let foundHtml = false
+  let foundHead = false
   let foundBody = false
 
   return new TransformStream({
     async transform(chunk, controller) {
-      if (!foundHtml || !foundBody) {
+      if (!foundHtml || !foundHead || !foundBody) {
         const content = decodeText(chunk)
         if (!foundHtml && content.includes('<html')) {
           foundHtml = true
         }
+        if (!foundHead && content.includes('<head')) {
+          foundHead = true
+        }
         if (!foundBody && content.includes('<body')) {
           foundBody = true
         }
@@ -306,6 +310,7 @@ export function createRootLayoutValidatorStream(
     flush(controller) {
       const missingTags = [
         foundHtml ? null : 'html',
+        foundHead ? null : 'head',
         foundBody ? null : 'body',
       ].filter(nonNullable)
 

diff --git a/test/e2e/app-dir/root-layout.test.ts b/test/e2e/app-dir/root-layout.test.ts
@@ -40,9 +40,9 @@ describe('app-dir root layout', () => {
 
         expect(await hasRedbox(browser, true)).toBe(true)
         expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
-          "Please make sure to include the following tags in your root layout: <html>, <body>.
+          "Please make sure to include the following tags in your root layout: <html>, <head>, <body>.
 
-          Missing required root layout tags: html, body"
+          Missing required root layout tags: html, head, body"
         `)
       })
 
@@ -54,9 +54,9 @@ describe('app-dir root layout', () => {
 
         expect(await hasRedbox(browser, true)).toBe(true)
         expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
-          "Please make sure to include the following tags in your root layout: <html>, <body>.
+          "Please make sure to include the following tags in your root layout: <html>, <head>, <body>.
 
-          Missing required root layout tags: html, body"
+          Missing required root layout tags: html, head, body"
         `)
       })
 
@@ -67,9 +67,9 @@ describe('app-dir root layout', () => {
 
         expect(await hasRedbox(browser, true)).toBe(true)
         expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
-          "Please make sure to include the following tags in your root layout: <html>, <body>.
+          "Please make sure to include the following tags in your root layout: <html>, <head>, <body>.
 
-          Missing required root layout tags: html, body"
+          Missing required root layout tags: html, head, body"
         `)
       })
     })

diff --git a/test/e2e/app-dir/root-layout/app/(required-tags)/has-tags/layout.js b/test/e2e/app-dir/root-layout/app/(required-tags)/has-tags/layout.js
@@ -4,6 +4,9 @@ export const revalidate = 0
 export default function Root({ children }) {
   return (
     <html>
+      <head>
+        <title>Hello World</title>
+      </head>
       <body>{children}</body>
     </html>
   )