Fix document head with react 18 (vercel#37443)

Fix custom head on getInitialProps works with React 18 ## Bug - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have helpful link attached, see `contributing.md` Co-authored-by: Jiachi Liu <[email protected]>
nfroidure · Jun 4, 2022 · 3e5b025 · 3e5b025
1 parent 4cbc61c
commit 3e5b025
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/packages/next/server/render.tsx b/packages/next/server/render.tsx
@@ -1455,6 +1455,7 @@ export async function renderToHTML(
       let styles
       if (hasDocumentGetInitialProps) {
         styles = docProps.styles
+        head = docProps.head
       } else {
         styles = jsxStyleRegistry.styles()
         jsxStyleRegistry.flush()

diff --git a/test/e2e/next-head/app/pages/_document.js b/test/e2e/next-head/app/pages/_document.js
@@ -1,4 +1,4 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
 
 export default function MyDocument() {
   return (
@@ -11,3 +11,15 @@ export default function MyDocument() {
     </Html>
   )
 }
+
+MyDocument.getInitialProps = async (context) => {
+  const initialProps = await Document.getInitialProps(context)
+
+  return {
+    ...initialProps,
+    head: [
+      ...(initialProps?.head ?? []),
+      <meta name="test-head-initial-props" content="hello" />,
+    ],
+  }
+}
diff --git a/test/e2e/next-head/index.test.ts b/test/e2e/next-head/index.test.ts
@@ -14,10 +14,6 @@ describe('should set-up next', () => {
         pages: new FileRef(join(__dirname, 'app/pages')),
         components: new FileRef(join(__dirname, 'app/components')),
       },
-      dependencies: {
-        react: '17',
-        'react-dom': '17',
-      },
     })
   })
   afterAll(() => next.destroy())
@@ -62,4 +58,13 @@ describe('should set-up next', () => {
       ).toBe('hello')
     }
   })
+
+  it('should have current head tags from a _document getInitialProps', async () => {
+    const html = await renderViaHTTP(next.url, '/')
+    const $ = cheerio.load(html)
+
+    expect($(`meta[name="test-head-initial-props"]`).attr()['content']).toBe(
+      'hello'
+    )
+  })
 })