Add editor links to RSC build error (#45179)

packages/next/src/build/webpack/plugins/wellknown-errors-plugin/parseRSC.ts

@@ -154,7 +154,8 @@ export function getRscError(
 
   const error = new SimpleWebpackError(
     fileName,
-    formattedError[0] +
+    'ReactServerComponentsError:\n' +
+      formattedError[0] +
       formattedError[1] +
       moduleTrace
         .map((m) =>

packages/next/src/client/components/react-dev-overlay/internal/components/Terminal/EditorLink.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { useOpenInEditor } from '../../helpers/use-open-in-editor'
+
+export function EditorLink({ file }: { file: string }) {
+  const open = useOpenInEditor({
+    file,
+    column: 1,
+    lineNumber: 1,
+  })
+
+  return (
+    <div
+      data-with-open-in-editor-link
+      tabIndex={10}
+      role={'link'}
+      onClick={open}
+      title={'Click to open in your editor'}
+    >
+      {file}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+        <polyline points="15 3 21 3 21 9"></polyline>
+        <line x1="10" y1="14" x2="21" y2="3"></line>
+      </svg>
+    </div>
+  )
+}

packages/next/src/client/components/react-dev-overlay/internal/components/Terminal/Terminal.tsx

@@ -1,18 +1,42 @@
 import Anser from 'next/dist/compiled/anser'
 import * as React from 'react'
+import { EditorLink } from './EditorLink'
 
 export type TerminalProps = { content: string }
 
+function getImportTraceFiles(content: string): [string, string[]] {
+  if (/ReactServerComponentsError:/.test(content)) {
+    // It's an RSC Build Error
+    const lines = content.split('\n')
+
+    // Grab the lines at the end containing the files
+    const files = []
+    while (/app\/.+\./.test(lines[lines.length - 1])) {
+      const file = lines.pop()!.trim()
+      files.unshift(file)
+    }
+
+    return [lines.join('\n'), files]
+  }
+
+  return [content, []]
+}
+
 export const Terminal: React.FC<TerminalProps> = function Terminal({
   content,
 }) {
+  const [source, editorLinks] = React.useMemo(
+    () => getImportTraceFiles(content),
+    [content]
+  )
+
   const decoded = React.useMemo(() => {
-    return Anser.ansiToJson(content, {
+    return Anser.ansiToJson(source, {
       json: true,
       use_classes: true,
       remove_empty: true,
     })
-  }, [content])
+  }, [source])
 
   return (
     <div data-nextjs-terminal>
@@ -32,6 +56,9 @@ export const Terminal: React.FC<TerminalProps> = function Terminal({
             {entry.content}
           </span>
         ))}
+        {editorLinks.map((file) => (
+          <EditorLink key={file} file={file} />
+        ))}
       </pre>
     </div>
   )

packages/next/src/client/components/react-dev-overlay/internal/components/Terminal/styles.tsx

@@ -25,6 +25,21 @@ const styles = css`
     white-space: pre-wrap;
     word-break: break-word;
   }
+
+  [data-with-open-in-editor-link] svg {
+    width: auto;
+    height: var(--size-font-small);
+    margin-left: var(--size-gap);
+  }
+  [data-with-open-in-editor-link] {
+    cursor: pointer;
+  }
+  [data-with-open-in-editor-link]:hover {
+    text-decoration: underline dotted;
+  }
+  [data-with-open-in-editor-link] {
+    margin-left: var(--size-gap-double);
+  }
 `
 
 export { styles }

test/e2e/app-dir/rsc-errors/app/client-with-errors/dynamic/page.js → test/development/acceptance-app/fixtures/rsc-build-errors/app/client-with-errors/dynamic/page.js

@@ -2,7 +2,9 @@
 
 import dynamic from 'next/dynamic'
 
-const Component = dynamic(async () => undefined, { ssr: false })
+const Component = dynamic(async () => () => <p>hello dynamic world</p>, {
+  ssr: false,
+})
 
 export default function Page() {
   return (

test/e2e/app-dir/rsc-errors/app/client-with-errors/server-only-in-client/server-only-lib.js → test/development/acceptance-app/fixtures/rsc-build-errors/app/client-with-errors/server-only-in-client/server-only-lib.js

@@ -1,4 +1,4 @@
-import 'server-only'
+// import 'server-only'
 
 export default function ServerOnlyLib() {
   return 'server-only-lib'

test/development/acceptance-app/fixtures/rsc-build-errors/app/editor-links/component.js

@@ -0,0 +1,4 @@
+// import { useState } from 'react'
+export default function Component() {
+  return <div>Component</div>
+}

test/development/acceptance-app/fixtures/rsc-build-errors/app/editor-links/page.js

@@ -0,0 +1,5 @@
+import Component from './component'
+
+export default function Page() {
+  return <Component />
+}

test/e2e/app-dir/rsc-errors/app/server-with-errors/client-only-in-server/client-only-lib.js → test/development/acceptance-app/fixtures/rsc-build-errors/app/server-with-errors/client-only-in-server/client-only-lib.js

@@ -1,4 +1,4 @@
-import 'client-only'
+// import 'client-only'
 
 export default function ClientOnlyLib() {
   return 'client-only-lib'

test/development/acceptance-app/fixtures/rsc-build-errors/app/server-with-errors/page-export/page.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>Page</p>
+}

test/e2e/app-dir/rsc-errors/app/swc/use-client/page.js → test/development/acceptance-app/fixtures/rsc-build-errors/app/swc/use-client/page.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react'
 
 // 'use client'

test/development/acceptance-app/helpers.ts

@@ -9,7 +9,9 @@ import { NextInstance } from 'test/lib/next-modes/base'
 
 export async function sandbox(
   next: NextInstance,
-  initialFiles?: Map<string, string>
+  initialFiles?: Map<string, string>,
+  initialUrl: string = '/',
+  webDriverOptions: any = undefined
 ) {
   await next.stop()
   await next.clean()
@@ -20,7 +22,7 @@ export async function sandbox(
     }
   }
   await next.start()
-  const browser = await webdriver(next.url, '/')
+  const browser = await webdriver(next.url, initialUrl, webDriverOptions)
   return {
     browser,
     session: {