[dev-overlay] pick up build error message (vercel#76290)

packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/build-error.tsx

@@ -1,4 +1,5 @@
-import * as React from 'react'
+import React, { useCallback, useMemo } from 'react'
+import stripAnsi from 'next/dist/compiled/strip-ansi'
 import { Terminal } from '../components/terminal'
 import { noop as css } from '../helpers/noop-template'
 import { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'
@@ -8,22 +9,41 @@ export interface BuildErrorProps extends ErrorBaseProps {
   message: string
 }
 
+const getErrorTextFromBuildErrorMessage = (multiLineMessage: string) => {
+  const lines = multiLineMessage.split('\n')
+  // The multi-line build error message looks like:
+  // <file path>:<line number>:<column number>
+  // <error message>
+  // <error code frame of compiler or bundler>
+  // e.g.
+  // ./path/to/file.js:1:1
+  // SyntaxError: ...
+  // > 1 | con st foo =
+  // ...
+  return stripAnsi(lines[1] || '')
+}
+
 export const BuildError: React.FC<BuildErrorProps> = function BuildError({
   message,
   ...props
 }) {
-  const noop = React.useCallback(() => {}, [])
+  const noop = useCallback(() => {}, [])
   const error = new Error(message)
+  const formattedMessage = useMemo(
+    () => getErrorTextFromBuildErrorMessage(message) || 'Failed to compile',
+    [message]
+  )
+
   return (
     <ErrorOverlayLayout
       errorType="Build Error"
-      errorMessage="Failed to compile"
+      errorMessage={formattedMessage}
       onClose={noop}
       error={error}
       footerMessage="This error occurred during the build process and can only be dismissed by fixing the error."
       {...props}
     >
-      <Terminal content={error.message} />
+      <Terminal content={message} />
     </ErrorOverlayLayout>
   )
 }

packages/next/src/client/components/react-dev-overlay/pages/hot-reloader-client.ts

@@ -195,6 +195,7 @@ function handleErrors(errors: any) {
   })
 
   // Only show the first error.
+
   onBuildError(formatted.errors[0])
 
   // Also log them to the console.

test/development/acceptance-app/error-recovery.test.ts

@@ -4,9 +4,10 @@ import { FileRef, nextTestSetup } from 'e2e-utils'
 import { check, describeVariants as describe } from 'next-test-utils'
 import path from 'path'
 import { outdent } from 'outdent'
+import stripAnsi from 'strip-ansi'
 
 describe.each(['default', 'turbo'])('Error recovery app %s', () => {
-  const { next } = nextTestSetup({
+  const { next, isTurbopack } = nextTestSetup({
     files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
     skipStart: true,
   })
@@ -470,8 +471,12 @@ describe.each(['default', 'turbo'])('Error recovery app %s', () => {
     )
     const { session } = sandbox
     await session.assertHasRedbox()
-    await expect(session.getRedboxSource(true)).resolves.toMatch(
-      /Failed to compile/
-    )
+
+    const source = stripAnsi(await session.getRedboxSource(true))
+    if (isTurbopack) {
+      expect(source).toMatch(/Parsing ecmascript source code failed/)
+    } else {
+      expect(source).toMatch(/x Expected '}', got '<eof>'/)
+    }
   })
 })

test/development/app-dir/dynamic-io-dev-errors/dynamic-io-dev-errors.test.ts

@@ -142,7 +142,7 @@ describe('Dynamic IO Dev Errors', () => {
       await expect(browser).toDisplayRedbox(`
          {
            "count": 1,
-           "description": "Failed to compile",
+           "description": "Ecmascript file had an error",
            "environmentLabel": null,
            "label": "Build Error",
            "source": "./app/page.tsx (1:14)
@@ -156,7 +156,7 @@ describe('Dynamic IO Dev Errors', () => {
       await expect(browser).toDisplayRedbox(`
        {
          "count": 1,
-         "description": "Failed to compile",
+         "description": "Error:   x Route segment config "revalidate" is not compatible with \`nextConfig.experimental.dynamicIO\`. Please remove it.",
          "environmentLabel": null,
          "label": "Build Error",
          "source": "./app/page.tsx

test/development/app-dir/server-component-next-dynamic-ssr-false/server-component-next-dynamic-ssr-false.test.ts

@@ -18,9 +18,10 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => {
       source: await getRedboxSource(browser),
     }
 
-    expect(redbox.description).toBe('Failed to compile')
-
     if (process.env.TURBOPACK) {
+      expect(redbox.description).toMatchInlineSnapshot(
+        `"Ecmascript file had an error"`
+      )
       expect(redbox.source).toMatchInlineSnapshot(`
          "./app/page.js (3:23)
          Ecmascript file had an error
@@ -35,6 +36,9 @@ describe('app-dir - server-component-next-dynamic-ssr-false', () => {
          \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component."
         `)
     } else {
+      expect(redbox.description).toMatchInlineSnapshot(
+        `"Error:   x \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component."`
+      )
       expect(redbox.source).toMatchInlineSnapshot(`
          "./app/page.js
          Error:   x \`ssr: false\` is not allowed with \`next/dynamic\` in Server Components. Please move it into a client component.

test/development/app-dir/ssr-in-rsc/ssr-in-rsc.test.ts

@@ -283,7 +283,7 @@ describe('react-dom/server in React Server environment', () => {
     if (isTurbopack) {
       expect(redbox).toMatchInlineSnapshot(`
        {
-         "description": "Failed to compile",
+         "description": "Ecmascript file had an error",
          "source": "./app/exports/app-code/react-dom-server-edge-implicit/page.js (3:1)
        Ecmascript file had an error
          1 | import * as ReactDOMServerEdge from 'react-dom/server'
@@ -378,7 +378,7 @@ describe('react-dom/server in React Server environment', () => {
     if (isTurbopack) {
       expect(redbox).toMatchInlineSnapshot(`
        {
-         "description": "Failed to compile",
+         "description": "Ecmascript file had an error",
          "source": "./app/exports/app-code/react-dom-server-node-implicit/page.js (3:1)
        Ecmascript file had an error
          1 | import * as ReactDOMServerNode from 'react-dom/server'
@@ -395,29 +395,29 @@ describe('react-dom/server in React Server environment', () => {
       `)
     } else {
       expect(redbox).toMatchInlineSnapshot(`
-         {
-           "description": "Failed to compile",
-           "source": "./app/exports/app-code/react-dom-server-node-implicit/page.js
-         Error:   x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
-           | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
-            ,-[1:1]
-          1 | import * as ReactDOMServerNode from 'react-dom/server'
-            : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-          2 | // Fine to drop once React is on ESM
-          3 | import ReactDOMServerNodeDefault from 'react-dom/server'
-            \`----
-           x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
-           | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
-            ,-[3:1]
-          1 | import * as ReactDOMServerNode from 'react-dom/server'
-          2 | // Fine to drop once React is on ESM
-          3 | import ReactDOMServerNodeDefault from 'react-dom/server'
-            : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-          4 | 
-          5 | export const runtime = 'nodejs'
-            \`----",
-         }
-        `)
+       {
+         "description": "Error:   x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.",
+         "source": "./app/exports/app-code/react-dom-server-node-implicit/page.js
+       Error:   x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
+         | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
+          ,-[1:1]
+        1 | import * as ReactDOMServerNode from 'react-dom/server'
+          : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        2 | // Fine to drop once React is on ESM
+        3 | import ReactDOMServerNodeDefault from 'react-dom/server'
+          \`----
+         x You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
+         | Learn more: https://nextjs.org/docs/app/building-your-application/rendering
+          ,-[3:1]
+        1 | import * as ReactDOMServerNode from 'react-dom/server'
+        2 | // Fine to drop once React is on ESM
+        3 | import ReactDOMServerNodeDefault from 'react-dom/server'
+          : ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+        4 | 
+        5 | export const runtime = 'nodejs'
+          \`----",
+       }
+      `)
     }
   })
 

test/development/basic/hmr/error-recovery.test.ts

@@ -519,7 +519,7 @@ describe.each([
         )
 
         await assertHasRedbox(browser)
-        expect(await getRedboxHeader(browser)).toMatch('Failed to compile')
+        expect(await getRedboxHeader(browser)).toMatch('Build Error')
 
         if (process.env.TURBOPACK) {
           expect(await getRedboxSource(browser)).toMatchInlineSnapshot(`
@@ -587,7 +587,7 @@ describe.each([
         )
 
         await assertHasRedbox(browser)
-        expect(await getRedboxHeader(browser)).toMatch('Failed to compile')
+        expect(await getRedboxHeader(browser)).toMatch('Build Error')
         let redboxSource = await getRedboxSource(browser)
 
         redboxSource = redboxSource.replace(`${next.testDir}`, '.')

test/development/middleware-errors/index.test.ts

@@ -2,6 +2,7 @@ import {
   assertHasRedbox,
   assertNoRedbox,
   check,
+  getRedboxDescription,
   getRedboxSource,
   retry,
 } from 'next-test-utils'
@@ -330,9 +331,16 @@ describe('middleware - development errors', () => {
     it('renders the error correctly and recovers', async () => {
       const browser = await next.browser('/')
       await assertHasRedbox(browser)
-      expect(
-        await browser.elementByCss('#nextjs__container_errors_desc').text()
-      ).toEqual('Failed to compile')
+      const description = await getRedboxDescription(browser)
+      if (isTurbopack) {
+        expect(description).toMatchInlineSnapshot(
+          `"Parsing ecmascript source code failed"`
+        )
+      } else {
+        expect(description).toMatchInlineSnapshot(
+          `"Error:   x Expected '{', got '}'"`
+        )
+      }
       await next.patchFile('middleware.js', `export default function () {}`)
       await assertNoRedbox(browser)
       expect(await browser.elementByCss('#page-title')).toBeTruthy()

test/e2e/app-dir/dynamic-io-segment-configs/dynamic-io-segment-configs.test.ts

@@ -32,7 +32,15 @@ describe('dynamic-io-segment-configs', () => {
         source: await getRedboxSource(browser),
       }
 
-      expect(redbox.description).toMatchInlineSnapshot(`"Failed to compile"`)
+      if (isTurbopack) {
+        expect(redbox.description).toMatchInlineSnapshot(
+          `"Ecmascript file had an error"`
+        )
+      } else {
+        expect(redbox.description).toMatchInlineSnapshot(
+          `"Error:   x Route segment config "revalidate" is not compatible with \`nextConfig.experimental.dynamicIO\`. Please remove it."`
+        )
+      }
       expect(redbox.source).toContain(
         '"revalidate" is not compatible with `nextConfig.experimental.dynamicIO`. Please remove it.'
       )
@@ -85,9 +93,15 @@ describe('dynamic-io-segment-configs', () => {
             source: await getRedboxSource(browser),
           }
 
-          expect(redbox.description).toMatchInlineSnapshot(
-            `"Failed to compile"`
-          )
+          if (isTurbopack) {
+            expect(redbox.description).toMatchInlineSnapshot(
+              `"Ecmascript file had an error"`
+            )
+          } else {
+            expect(redbox.description).toMatchInlineSnapshot(
+              `"Error:   x Route segment config "runtime" is not compatible with \`nextConfig.experimental.dynamicIO\`. Please remove it."`
+            )
+          }
           expect(redbox.source).toContain(
             '"runtime" is not compatible with `nextConfig.experimental.dynamicIO`. Please remove it.'
           )

test/e2e/app-dir/use-cache-segment-configs/use-cache-segment-configs.test.ts

@@ -26,10 +26,11 @@ describe('use-cache-segment-configs', () => {
         await assertHasRedbox(browser)
 
         const description = await getRedboxDescription(browser)
+        expect(description).toMatchInlineSnapshot(
+          `"Ecmascript file had an error"`
+        )
         const source = await getRedboxSource(browser)
 
-        expect(description).toBe('Failed to compile')
-
         expect(source).toMatchInlineSnapshot(`
          "./app/runtime/page.tsx (1:14)
          Ecmascript file had an error

test/e2e/app-dir/use-cache-unknown-cache-kind/use-cache-unknown-cache-kind.test.ts

@@ -100,7 +100,15 @@ describe('use-cache-unknown-cache-kind', () => {
       const errorDescription = await getRedboxDescription(browser)
       const errorSource = await getRedboxSource(browser)
 
-      expect(errorDescription).toBe('Failed to compile')
+      if (isTurbopack) {
+        expect(errorDescription).toMatchInlineSnapshot(
+          `"Ecmascript file had an error"`
+        )
+      } else {
+        expect(errorDescription).toMatchInlineSnapshot(
+          `"Error:   x Unknown cache kind "custom". Please configure a cache handler for this kind in the "experimental.cacheHandlers" object in your Next.js config."`
+        )
+      }
 
       if (isTurbopack) {
         expect(errorSource).toMatchInlineSnapshot(`

test/e2e/app-dir/use-cache-without-experimental-flag/use-cache-without-experimental-flag.test.ts

@@ -84,7 +84,15 @@ describe('use-cache-without-experimental-flag', () => {
       const errorDescription = await getRedboxDescription(browser)
       const errorSource = await getRedboxSource(browser)
 
-      expect(errorDescription).toBe('Failed to compile')
+      if (isTurbopack) {
+        expect(errorDescription).toMatchInlineSnapshot(
+          `"Ecmascript file had an error"`
+        )
+      } else {
+        expect(errorDescription).toMatchInlineSnapshot(
+          `"Error:   x To use "use cache", please enable the experimental feature flag "useCache" in your Next.js config."`
+        )
+      }
 
       if (isTurbopack) {
         expect(errorSource).toMatchInlineSnapshot(`

test/integration/next-image-new/invalid-image-import/test/index.test.ts

@@ -4,7 +4,7 @@ import { join } from 'path'
 import {
   assertHasRedbox,
   findPort,
-  getRedboxHeader,
+  getRedboxDescription,
   getRedboxSource,
   killApp,
   launchApp,
@@ -23,7 +23,14 @@ function runTests({ isDev }) {
     if (isDev) {
       const browser = await webdriver(appPort, '/')
       await assertHasRedbox(browser)
-      expect(await getRedboxHeader(browser)).toMatch('Failed to compile')
+      const description = await getRedboxDescription(browser)
+      if (process.env.TURBOPACK) {
+        expect(description).toMatchInlineSnapshot(`"Processing image failed"`)
+      } else {
+        expect(description).toMatchInlineSnapshot(
+          `"Error: Image import "../public/invalid.svg" is not a valid image file. The image may be corrupted or an unsupported format."`
+        )
+      }
       const source = await getRedboxSource(browser)
       if (process.env.TURBOPACK) {
         expect(source).toMatchInlineSnapshot(`