Fix next/head in _app in RSC pages (#37928)

* fix next/head in _app with rsc * revert change Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
vercel · Jun 22, 2022 · b04cdc9 · b04cdc9
1 parent 1a0346e
commit b04cdc9
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -1280,6 +1280,11 @@ export default async function getBaseWebpackConfig(
                     loader: 'next-flight-client-loader',
                   },
                 },
+                // _app should be treated as a client component as well as all its dependencies.
+                {
+                  test: new RegExp(`_app\\.(${rawPageExtensions.join('|')})$`),
+                  layer: 'sc_client',
+                },
               ]
             : []
           : []),

diff --git a/test/integration/react-streaming-and-server-components/test/css.js b/test/integration/react-streaming-and-server-components/test/css.js
@@ -9,6 +9,7 @@ export default function (context) {
     )
     expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
   })
+
   it('should include global styles with `serverComponents: true`', async () => {
     const browser = await webdriver(context.appPort, '/global-styles-rsc')
     const currentColor = await browser.eval(
@@ -24,4 +25,10 @@ export default function (context) {
     )
     expect(currentColor).toMatchInlineSnapshot(`"rgb(255, 0, 0)"`)
   })
+
+  it('should support next/head inside _app with RSC', async () => {
+    const browser = await webdriver(context.appPort, '/multi')
+    const title = await browser.eval(`document.title`)
+    expect(title).toBe('hi')
+  })
 }
diff --git a/test/integration/react-streaming-and-server-components/test/index.test.js b/test/integration/react-streaming-and-server-components/test/index.test.js
@@ -24,11 +24,17 @@ import streaming from './streaming'
 import basic from './basic'
 import { getNodeBuiltinModuleNotSupportedInEdgeRuntimeMessage } from 'next/dist/build/utils'
 
-const appWithGlobalCss = `
+const appWithGlobalCssAndHead = `
 import '../styles.css'
+import Head from 'next/head'
 
 function App({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return <>
+    <Head>
+      <title>hi</title>
+    </Head>
+    <Component {...pageProps} />
+  </>
 }
 
 export default App
@@ -156,7 +162,7 @@ const nodejsRuntimeBasicSuite = {
 
 const cssSuite = {
   runTests: css,
-  beforeAll: () => appPage.write(appWithGlobalCss),
+  beforeAll: () => appPage.write(appWithGlobalCssAndHead),
   afterAll: () => appPage.delete(),
 }