Fix client reference access causing metadata missing (#70732)

vercel · Oct 4, 2024 · 0a450c9 · 0a450c9
1 parent 3b9889e
commit 0a450c9
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 9 deletions.
diff --git a/packages/next/src/lib/metadata/resolve-metadata.ts b/packages/next/src/lib/metadata/resolve-metadata.ts
@@ -32,7 +32,6 @@ import {
 import { resolveOpenGraph, resolveTwitter } from './resolvers/resolve-opengraph'
 import { resolveTitle } from './resolvers/resolve-title'
 import { resolveAsArrayOrUndefined } from './generate/utils'
-import { isClientReference } from '../client-reference'
 import {
   getComponentTypeModule,
   getLayoutOrPageModule,
@@ -331,9 +330,6 @@ async function getDefinedViewport(
   props: any,
   tracingProps: { route: string }
 ): Promise<Viewport | ViewportResolver | null> {
-  if (isClientReference(mod)) {
-    return null
-  }
   if (typeof mod.generateViewport === 'function') {
     const { route } = tracingProps
     return (parent: ResolvingViewport) =>
@@ -356,11 +352,6 @@ async function getDefinedMetadata(
   props: any,
   tracingProps: { route: string }
 ): Promise<Metadata | MetadataResolver | null> {
-  // Layer is a client component, we just skip it. It can't have metadata exported.
-  // Return early to avoid accessing properties error for client references.
-  if (isClientReference(mod)) {
-    return null
-  }
   if (typeof mod.generateMetadata === 'function') {
     const { route } = tracingProps
     return (parent: ResolvingMetadata) =>

diff --git a/test/e2e/app-dir/reexport-client-component-metadata/app/layout.tsx b/test/e2e/app-dir/reexport-client-component-metadata/app/layout.tsx
@@ -0,0 +1,12 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+export const metadata = {
+  title: 'Root Layout',
+  description: 'Root Description',
+}
diff --git a/test/e2e/app-dir/reexport-client-component-metadata/app/no-override/page-content.tsx b/test/e2e/app-dir/reexport-client-component-metadata/app/no-override/page-content.tsx
@@ -0,0 +1,5 @@
+'use client'
+
+export default function PageContent() {
+  return <h1>Page 2 Content</h1>
+}
diff --git a/test/e2e/app-dir/reexport-client-component-metadata/app/no-override/page.tsx b/test/e2e/app-dir/reexport-client-component-metadata/app/no-override/page.tsx
@@ -0,0 +1,3 @@
+import PageContent from './page-content'
+
+export default PageContent
diff --git a/test/e2e/app-dir/reexport-client-component-metadata/app/override/page-content.tsx b/test/e2e/app-dir/reexport-client-component-metadata/app/override/page-content.tsx
@@ -0,0 +1,5 @@
+'use client'
+
+export default function PageContent() {
+  return <h1>Page 1 Content</h1>
+}
diff --git a/test/e2e/app-dir/reexport-client-component-metadata/app/override/page.tsx b/test/e2e/app-dir/reexport-client-component-metadata/app/override/page.tsx
@@ -0,0 +1,8 @@
+import PageContent from './page-content'
+
+export const metadata = {
+  title: 'Page 1',
+  description: 'Page 1 Description',
+}
+
+export default PageContent
diff --git a/...e2e/app-dir/reexport-client-component-metadata/reexport-client-component-metadata.test.ts b/...e2e/app-dir/reexport-client-component-metadata/reexport-client-component-metadata.test.ts
@@ -0,0 +1,39 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('app-dir - reexport-client-component-metadata', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should render the page metadata if override', async () => {
+    const $ = await next.render$('/override')
+    expect($('title').text()).toBe('Page 1')
+    expect($('meta[name="description"]').attr('content')).toBe(
+      'Page 1 Description'
+    )
+
+    const browser = await next.browser('/override')
+    expect(await browser.elementByCss('title').text()).toBe('Page 1')
+    expect(
+      await browser
+        .elementByCss('meta[name="description"]')
+        .getAttribute('content')
+    ).toBe('Page 1 Description')
+  })
+
+  it('should render the layout metadata if not override', async () => {
+    const $ = await next.render$('/no-override')
+    expect($('title').text()).toBe('Root Layout')
+    expect($('meta[name="description"]').attr('content')).toBe(
+      'Root Description'
+    )
+
+    const browser = await next.browser('/no-override')
+    expect(await browser.elementByCss('title').text()).toBe('Root Layout')
+    expect(
+      await browser
+        .elementByCss('meta[name="description"]')
+        .getAttribute('content')
+    ).toBe('Root Description')
+  })
+})