Update metadata to await the generation so we get a proper codeframe

in theory this shouldn't be necessary but currently we only track awaits and just rendering the promise as is doesn't cause there to be and IO stack line to generate a codeframe off of

Author: gnoff

packages/next/src/lib/metadata/metadata.tsx

@@ -81,8 +81,8 @@ export function createMetadataComponents({
     workStore
   )
 
-  function Viewport() {
-    const pendingViewportTags = getResolvedViewport(
+  async function Viewport() {
+    const tags = await getResolvedViewport(
       tree,
       searchParams,
       getDynamicParamFromSegment,
@@ -107,17 +107,20 @@ export function createMetadataComponents({
       return null
     })
 
+    return tags
+  }
+  Viewport.displayName = 'Next.Viewport'
+
+  function ViewportWrapper() {
     return (
       <ViewportBoundary>
-        {/* @ts-expect-error -- Promise<ReactNode> not considered a valid child even though it is */}
-        {pendingViewportTags}
+        <Viewport />
       </ViewportBoundary>
     )
   }
-  Viewport.displayName = 'Next.Viewport'
 
-  function Metadata() {
-    const pendingMetadataTags = getResolvedMetadata(
+  async function Metadata() {
+    const tags = await getResolvedMetadata(
       tree,
       pathnameForMetadata,
       searchParams,
@@ -146,29 +149,31 @@ export function createMetadataComponents({
       return null
     })
 
+    return tags
+  }
+  Metadata.displayName = 'Next.Metadata'
+
+  function MetadataWrapper() {
     // TODO: We shouldn't change what we render based on whether we are streaming or not.
     // If we aren't streaming we should just block the response until we have resolved the
     // metadata.
     if (!serveStreamingMetadata) {
       return (
         <MetadataBoundary>
-          {/* @ts-expect-error -- Promise<ReactNode> not considered a valid child even though it is */}
-          {pendingMetadataTags}
+          <Metadata />
         </MetadataBoundary>
       )
     }
     return (
       <div hidden>
         <MetadataBoundary>
           <Suspense name="Next.Metadata">
-            {/* @ts-expect-error -- Promise<ReactNode> not considered a valid child even though it is */}
-            {pendingMetadataTags}
+            <Metadata />
           </Suspense>
         </MetadataBoundary>
       </div>
     )
   }
-  Metadata.displayName = 'Next.Metadata'
 
   function MetadataOutlet() {
     const pendingOutlet = Promise.all([
@@ -205,8 +210,8 @@ export function createMetadataComponents({
   MetadataOutlet.displayName = 'Next.MetadataOutlet'
 
   return {
-    Viewport,
-    Metadata,
+    Viewport: ViewportWrapper,
+    Metadata: MetadataWrapper,
     MetadataOutlet,
   }
 }

packages/next/src/next-devtools/dev-overlay/components/errors/error-type-label/error-type-label.tsx

@@ -4,6 +4,7 @@ export type ErrorType =
   | `Console ${string}`
   | `Recoverable ${string}`
   | 'Blocking Route'
+  | 'Ambiguous Metadata'
 
 type ErrorTypeLabelProps = {
   errorType: ErrorType
@@ -13,7 +14,7 @@ export function ErrorTypeLabel({ errorType }: ErrorTypeLabelProps) {
   return (
     <span
       id="nextjs__container_errors_label"
-      className={`nextjs__container_errors_label ${errorType === 'Blocking Route' ? 'nextjs__container_errors_label_blocking_page' : ''}`}
+      className={`nextjs__container_errors_label ${errorType === 'Blocking Route' || errorType === 'Ambiguous Metadata' ? 'nextjs__container_errors_label_blocking_page' : ''}`}
     >
       {errorType}
     </span>