[metadata] refine metadata image error for webpack (#83139)

huozhi · web-flow · commit 91601608af4d · 2025-08-28T13:35:08.000+02:00
diff --git a/packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts b/packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts
@@ -126,14 +126,17 @@ async function nextMetadataImageLoader(
     }`
   }
 
+  let imageError
   const imageSize: { width?: number; height?: number } = await getImageSize(
     content
-  ).catch((err) => err)
-
-  if (imageSize instanceof Error) {
-    const err = imageSize
-    err.name = 'InvalidImageFormatError'
-    throw err
+  ).catch((error) => {
+    const message = `Process image "${path.posix.join(segment || '/', interpolatedName)}" failed: ${error}`
+    imageError = new Error(message)
+    return {}
+  })
+
+  if (imageError) {
+    throw imageError
   }
 
   const imageData: Omit<MetadataImageModule, 'url'> = {
diff --git a/test/e2e/app-dir/metadata-invalid-image-file/app/favicon.ico b/test/e2e/app-dir/metadata-invalid-image-file/app/favicon.ico
@@ -0,0 +1 @@
+malformed image content
diff --git a/test/e2e/app-dir/metadata-invalid-image-file/app/layout.tsx b/test/e2e/app-dir/metadata-invalid-image-file/app/layout.tsx
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/metadata-invalid-image-file/app/page.tsx b/test/e2e/app-dir/metadata-invalid-image-file/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>hello world</p>
+}
diff --git a/test/e2e/app-dir/metadata-invalid-image-file/metadata-invalid-image-file.test.ts b/test/e2e/app-dir/metadata-invalid-image-file/metadata-invalid-image-file.test.ts
@@ -0,0 +1,43 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('metadata-invalid-image-file', () => {
+  const { next, isTurbopack, isNextDev, skipped } = nextTestSetup({
+    files: __dirname,
+    skipDeployment: true,
+    skipStart: true,
+  })
+
+  if (skipped) return
+
+  it('should error on invalid metadata image file', async () => {
+    // In dev, it needs to render the page first
+    if (isNextDev) {
+      await next.start()
+      await next.fetch('/')
+    } else {
+      await next.build()
+    }
+
+    if (isTurbopack) {
+      // In turbopack the image decoding error is displayed in multiple lines
+      expect(next.cliOutput).toContain('app/favicon.ico')
+      expect(next.cliOutput).toContain('Processing image failed')
+      expect(next.cliOutput).toContain('unable to decode image data')
+    } else {
+      expect(next.cliOutput).toContain(
+        'Error: Process image "/favicon.ico" failed:'
+      )
+    }
+
+    if (!isNextDev) {
+      // `next build` should fail
+      if (isTurbopack) {
+        expect(next.cliOutput).toContain('Build error occurred')
+      } else {
+        expect(next.cliOutput).toContain(
+          'Build failed because of webpack errors'
+        )
+      }
+    }
+  })
+})
diff --git a/test/e2e/app-dir/metadata-invalid-image-file/next.config.js b/test/e2e/app-dir/metadata-invalid-image-file/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function Page() {`
	`2`	`+ return <p>hello world</p>`
	`3`	`+}`