merge pages overlay into next and remove the package

packages/next/package.json

@@ -148,7 +148,6 @@
     "@napi-rs/triples": "1.1.0",
     "@next/polyfill-module": "14.1.1-canary.1",
     "@next/polyfill-nomodule": "14.1.1-canary.1",
-    "@next/react-dev-overlay": "14.1.1-canary.1",
     "@next/react-refresh-utils": "14.1.1-canary.1",
     "@next/swc": "14.1.1-canary.1",
     "@opentelemetry/api": "1.6.0",
@@ -287,7 +286,7 @@
     "server-only": "0.0.1",
     "setimmediate": "1.0.5",
     "shell-quote": "1.7.3",
-    "source-map": "0.6.1",
+    "source-map": "0.8.0-beta.0",
     "stacktrace-parser": "0.1.10",
     "stream-browserify": "3.0.0",
     "stream-http": "3.1.1",

packages/next/src/build/collect-build-traces.ts

@@ -297,7 +297,6 @@ export async function collectBuildTraces({
         '**/next/dist/compiled/webpack/(bundle4|bundle5).js',
         '**/node_modules/webpack5/**/*',
         '**/next/dist/server/lib/route-resolver*',
-        'next/dist/compiled/@next/react-dev-overlay/dist/**/*',
         'next/dist/compiled/semver/semver/**/*.js',
 
         ...(ciEnvironment.hasNextSupport

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

@@ -1,6 +1,6 @@
 import { bold, cyan, green, red, yellow } from '../../../../lib/picocolors'
 import { SimpleWebpackError } from './simpleWebpackError'
-import { createOriginalStackFrame } from 'next/dist/compiled/@next/react-dev-overlay/dist/middleware'
+import { createOriginalStackFrame } from '../../../../client/components/react-dev-overlay/server/middleware'
 import type { webpack } from 'next/dist/compiled/webpack/webpack'
 
 // Based on https://github.com/webpack/webpack/blob/fcdd04a833943394bbb0a9eeb54a962a24cc7e41/lib/stats/DefaultStatsFactoryPlugin.js#L422-L431

packages/next/src/client/app-index.tsx

@@ -185,9 +185,9 @@ export function hydrate() {
   if (process.env.NODE_ENV !== 'production') {
     const rootLayoutMissingTagsError = (self as any)
       .__next_root_layout_missing_tags_error
-    const HotReload: typeof import('./components/react-dev-overlay/hot-reloader-client').default =
-      require('./components/react-dev-overlay/hot-reloader-client')
-        .default as typeof import('./components/react-dev-overlay/hot-reloader-client').default
+    const HotReload: typeof import('./components/react-dev-overlay/app/hot-reloader-client').default =
+      require('./components/react-dev-overlay/app/hot-reloader-client')
+        .default as typeof import('./components/react-dev-overlay/app/hot-reloader-client').default
 
     // Don't try to hydrate if root layout is missing required tags, render error instead
     if (rootLayoutMissingTagsError) {
@@ -264,12 +264,12 @@ export function hydrate() {
     if (process.env.NODE_ENV !== 'production') {
       // if an error is thrown while rendering an RSC stream, this will catch it in dev
       // and show the error overlay
-      const ReactDevOverlay: typeof import('./components/react-dev-overlay/internal/ReactDevOverlay').default =
-        require('./components/react-dev-overlay/internal/ReactDevOverlay')
-          .default as typeof import('./components/react-dev-overlay/internal/ReactDevOverlay').default
+      const ReactDevOverlay: typeof import('./components/react-dev-overlay/app/ReactDevOverlay').default =
+        require('./components/react-dev-overlay/app/ReactDevOverlay')
+          .default as typeof import('./components/react-dev-overlay/app/ReactDevOverlay').default
 
-      const INITIAL_OVERLAY_STATE: typeof import('./components/react-dev-overlay/internal/error-overlay-reducer').INITIAL_OVERLAY_STATE =
-        require('./components/react-dev-overlay/internal/error-overlay-reducer').INITIAL_OVERLAY_STATE
+      const INITIAL_OVERLAY_STATE: typeof import('./components/react-dev-overlay/app/error-overlay-reducer').INITIAL_OVERLAY_STATE =
+        require('./components/react-dev-overlay/app/error-overlay-reducer').INITIAL_OVERLAY_STATE
 
       const getSocketUrl: typeof import('./components/react-dev-overlay/internal/helpers/get-socket-url').getSocketUrl =
         require('./components/react-dev-overlay/internal/helpers/get-socket-url')

packages/next/src/client/components/app-router.tsx

@@ -603,8 +603,8 @@ function Router({
         </DevRootNotFoundBoundary>
       )
     }
-    const HotReloader: typeof import('./react-dev-overlay/hot-reloader-client').default =
-      require('./react-dev-overlay/hot-reloader-client').default
+    const HotReloader: typeof import('./react-dev-overlay/app/hot-reloader-client').default =
+      require('./react-dev-overlay/app/hot-reloader-client').default
 
     content = <HotReloader assetPrefix={assetPrefix}>{content}</HotReloader>
   }

packages/next/src/client/components/react-dev-overlay/internal/ReactDevOverlay.tsx → packages/next/src/client/components/react-dev-overlay/app/ReactDevOverlay.tsx

@@ -5,15 +5,15 @@ import type {
   UnhandledErrorAction,
 } from './error-overlay-reducer'
 
-import { ShadowPortal } from './components/ShadowPortal'
-import { BuildError } from './container/BuildError'
-import { Errors } from './container/Errors'
-import type { SupportedErrorEvent } from './container/Errors'
-import { RootLayoutError } from './container/RootLayoutError'
-import { parseStack } from './helpers/parseStack'
-import { Base } from './styles/Base'
-import { ComponentStyles } from './styles/ComponentStyles'
-import { CssReset } from './styles/CssReset'
+import { ShadowPortal } from '../internal/components/ShadowPortal'
+import { BuildError } from '../internal/container/BuildError'
+import { Errors } from '../internal/container/Errors'
+import type { SupportedErrorEvent } from '../internal/container/Errors'
+import { RootLayoutError } from '../internal/container/RootLayoutError'
+import { parseStack } from '../internal/helpers/parseStack'
+import { Base } from '../internal/styles/Base'
+import { ComponentStyles } from '../internal/styles/ComponentStyles'
+import { CssReset } from '../internal/styles/CssReset'
 
 interface ReactDevOverlayState {
   reactError: SupportedErrorEvent | null
@@ -86,12 +86,14 @@ class ReactDevOverlay extends React.PureComponent<
               />
             ) : reactError ? (
               <Errors
+                isAppDir={true}
                 versionInfo={state.versionInfo}
                 initialDisplayState="fullscreen"
                 errors={[reactError]}
               />
             ) : hasRuntimeErrors ? (
               <Errors
+                isAppDir={true}
                 initialDisplayState="minimized"
                 errors={state.errors}
                 versionInfo={state.versionInfo}

packages/next/src/client/components/react-dev-overlay/internal/error-overlay-reducer.ts → packages/next/src/client/components/react-dev-overlay/app/error-overlay-reducer.ts

@@ -1,7 +1,7 @@
 import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 import type { VersionInfo } from '../../../../server/dev/parse-version-info'
-import type { SupportedErrorEvent } from './container/Errors'
-import type { ComponentStackFrame } from './helpers/parse-component-stack'
+import type { SupportedErrorEvent } from '../internal/container/Errors'
+import type { ComponentStackFrame } from '../internal/helpers/parse-component-stack'
 
 export const ACTION_BUILD_OK = 'build-ok'
 export const ACTION_BUILD_ERROR = 'build-error'

packages/next/src/client/components/react-dev-overlay/hot-reloader-client.tsx → packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -7,37 +7,37 @@ import React, {
   startTransition,
 } from 'react'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
-import formatWebpackMessages from '../../dev/error-overlay/format-webpack-messages'
-import { useRouter } from '../navigation'
+import formatWebpackMessages from '../../../dev/error-overlay/format-webpack-messages'
+import { useRouter } from '../../navigation'
 import {
   ACTION_VERSION_INFO,
   INITIAL_OVERLAY_STATE,
   errorOverlayReducer,
-} from './internal/error-overlay-reducer'
+} from './error-overlay-reducer'
 import {
   ACTION_BUILD_OK,
   ACTION_BUILD_ERROR,
   ACTION_BEFORE_REFRESH,
   ACTION_REFRESH,
   ACTION_UNHANDLED_ERROR,
   ACTION_UNHANDLED_REJECTION,
-} from './internal/error-overlay-reducer'
-import { parseStack } from './internal/helpers/parseStack'
-import ReactDevOverlay from './internal/ReactDevOverlay'
+} from './error-overlay-reducer'
+import { parseStack } from '../internal/helpers/parseStack'
+import ReactDevOverlay from './ReactDevOverlay'
 import {
   RuntimeErrorHandler,
   useErrorHandler,
-} from './internal/helpers/use-error-handler'
+} from '../internal/helpers/use-error-handler'
 import {
   useSendMessage,
   useTurbopack,
   useWebsocket,
   useWebsocketPing,
-} from './internal/helpers/use-websocket'
-import { parseComponentStack } from './internal/helpers/parse-component-stack'
-import type { VersionInfo } from '../../../server/dev/parse-version-info'
-import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../server/dev/hot-reloader-types'
-import type { HMR_ACTION_TYPES } from '../../../server/dev/hot-reloader-types'
+} from '../internal/helpers/use-websocket'
+import { parseComponentStack } from '../internal/helpers/parse-component-stack'
+import type { VersionInfo } from '../../../../server/dev/parse-version-info'
+import { HMR_ACTIONS_SENT_TO_BROWSER } from '../../../../server/dev/hot-reloader-types'
+import type { HMR_ACTION_TYPES } from '../../../../server/dev/hot-reloader-types'
 
 interface Dispatcher {
   onBuildOk(): void

packages/next/src/client/components/react-dev-overlay/internal/components/Dialog/styles.ts

@@ -8,7 +8,7 @@ const styles = css`
     margin-right: auto;
     margin-left: auto;
     outline: none;
-    background: white;
+    background: var(--color-background);
     border-radius: var(--size-gap);
     box-shadow: 0 var(--size-gap-half) var(--size-gap-double)
       rgba(0, 0, 0, 0.25);

packages/next/src/client/components/react-dev-overlay/internal/components/LeftRightDialogHeader/styles.ts

@@ -58,6 +58,8 @@ const styles = css`
 
     opacity: 0.4;
     transition: opacity 0.25s ease;
+
+    color: var(--color-font);
   }
   [data-nextjs-dialog-left-right] > button:last-of-type:hover {
     opacity: 0.7;

packages/next/src/client/components/react-dev-overlay/internal/components/Overlay/maintain--tab-focus.ts

@@ -918,7 +918,7 @@ var focusSvgForeignobjectTabindex = {
     element.innerHTML = generate(
       '<foreignObject tabindex="-1"><input type="text" /></foreignObject>'
     )
-    // Safari 8's quersSelector() can't identify foreignObject, but getElementyByTagName() can
+    // Safari 8's querySelector() can't identify foreignObject, but getElementsByTagName() can
     return (
       element.querySelector('foreignObject') ||
       element.getElementsByTagName('foreignObject')[0]

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

@@ -29,7 +29,7 @@ const styles = css`
     right: 0;
     bottom: 0;
     left: 0;
-    background-color: rgba(17, 17, 17, 0.2);
+    background-color: var(--color-backdrop);
     pointer-events: all;
     z-index: -1;
   }

packages/next/src/client/components/react-dev-overlay/internal/components/hot-linked-text/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { getWordsAndWhitespaces } from './get-words-and-whitespaces'
 
-const linkRegex = /https?:\/\/[^\s/$.?#].[^\s"]*/i
+const linkRegex = /https?:\/\/[^\s/$.?#].[^\s)'"]*/i
 
 export const HotlinkedText: React.FC<{
   text: string
@@ -15,9 +15,12 @@ export const HotlinkedText: React.FC<{
       {linkRegex.test(text)
         ? wordsAndWhitespaces.map((word, index) => {
             if (linkRegex.test(word)) {
+              const link = linkRegex.exec(word)!
               return (
                 <React.Fragment key={`link-${index}`}>
-                  <a href={word}>{word}</a>
+                  <a href={link[0]} target="_blank" rel="noreferrer noopener">
+                    {word}
+                  </a>
                 </React.Fragment>
               )
             }

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

@@ -67,6 +67,6 @@ export const styles = css`
   }
 
   .nextjs-container-build-error-body small {
-    color: #757575;
+    color: var(--color-font);
   }
 `

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

@@ -2,11 +2,11 @@ import * as React from 'react'
 import {
   ACTION_UNHANDLED_ERROR,
   ACTION_UNHANDLED_REJECTION,
-} from '../error-overlay-reducer'
+} from '../../app/error-overlay-reducer'
 import type {
   UnhandledErrorAction,
   UnhandledRejectionAction,
-} from '../error-overlay-reducer'
+} from '../../app/error-overlay-reducer'
 import {
   Dialog,
   DialogBody,
@@ -31,6 +31,7 @@ export type SupportedErrorEvent = {
   event: UnhandledErrorAction | UnhandledRejectionAction
 }
 export type ErrorsProps = {
+  isAppDir: boolean
   errors: SupportedErrorEvent[]
   initialDisplayState: DisplayState
   versionInfo?: VersionInfo
@@ -57,6 +58,7 @@ function getErrorSignature(ev: SupportedErrorEvent): string {
 }
 
 export const Errors: React.FC<ErrorsProps> = function Errors({
+  isAppDir,
   errors,
   initialDisplayState,
   versionInfo,
@@ -105,7 +107,7 @@ export const Errors: React.FC<ErrorsProps> = function Errors({
     }
     let mounted = true
 
-    getErrorByType(nextError).then(
+    getErrorByType(nextError, isAppDir).then(
       (resolved) => {
         // We don't care if the desired error changed while we were resolving,
         // thus we're not tracking it using a ref. Once the work has been done,
@@ -122,7 +124,7 @@ export const Errors: React.FC<ErrorsProps> = function Errors({
     return () => {
       mounted = false
     }
-  }, [nextError])
+  }, [nextError, isAppDir])
 
   const [displayState, setDisplayState] =
     React.useState<DisplayState>(initialDisplayState)

packages/next/src/client/components/react-dev-overlay/internal/helpers/getErrorByType.ts

@@ -1,7 +1,7 @@
 import {
   ACTION_UNHANDLED_ERROR,
   ACTION_UNHANDLED_REJECTION,
-} from '../error-overlay-reducer'
+} from '../../app/error-overlay-reducer'
 import type { SupportedErrorEvent } from '../container/Errors'
 import { getErrorSource } from './nodeStackFrames'
 import { getOriginalStackFrames } from './stack-frame'
@@ -17,7 +17,8 @@ export type ReadyRuntimeError = {
 }
 
 export async function getErrorByType(
-  ev: SupportedErrorEvent
+  ev: SupportedErrorEvent,
+  isAppDir: boolean
 ): Promise<ReadyRuntimeError> {
   const { id, event } = ev
   switch (event.type) {
@@ -30,6 +31,7 @@ export async function getErrorByType(
         frames: await getOriginalStackFrames(
           event.frames,
           getErrorSource(event.reason),
+          isAppDir,
           event.reason.toString()
         ),
       }

packages/next/src/client/components/react-dev-overlay/internal/helpers/stack-frame.ts

@@ -1,5 +1,11 @@
 import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 
+type OriginalStackFrameResponse = {
+  originalStackFrame: StackFrame
+  originalCodeFrame: string | null
+  sourcePackage?: string
+}
+
 export type OriginalStackFrame =
   | {
       error: true
@@ -35,13 +41,14 @@ export type OriginalStackFrame =
 export function getOriginalStackFrame(
   source: StackFrame,
   type: 'server' | 'edge-server' | null,
+  isAppDir: boolean,
   errorMessage: string
 ): Promise<OriginalStackFrame> {
   async function _getOriginalStackFrame(): Promise<OriginalStackFrame> {
     const params = new URLSearchParams()
     params.append('isServer', String(type === 'server'))
     params.append('isEdgeServer', String(type === 'edge-server'))
-    params.append('isAppDirectory', 'true')
+    params.append('isAppDirectory', String(isAppDir))
     params.append('errorMessage', errorMessage)
     for (const key in source) {
       params.append(key, ((source as any)[key] ?? '').toString())
@@ -113,10 +120,13 @@ export function getOriginalStackFrame(
 export function getOriginalStackFrames(
   frames: StackFrame[],
   type: 'server' | 'edge-server' | null,
+  isAppDir: boolean,
   errorMessage: string
 ) {
   return Promise.all(
-    frames.map((frame) => getOriginalStackFrame(frame, type, errorMessage))
+    frames.map((frame) =>
+      getOriginalStackFrame(frame, type, isAppDir, errorMessage)
+    )
   )
 }
 

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

@@ -17,6 +17,14 @@ export function Base() {
           --size-font-big: 20px;
           --size-font-bigger: 24px;
 
+          --color-background: white;
+          --color-font: #757575;
+          --color-backdrop: rgba(17, 17, 17, 0.2);
+
+          --color-stack-h6: #222;
+          --color-stack-headline: #666;
+          --color-stack-subline: #999;
+
           --color-accents-1: #808080;
           --color-accents-2: #222222;
           --color-accents-3: #404040;
@@ -46,6 +54,20 @@ export function Base() {
           --color-ansi-bright-yellow: #ffd966;
         }
 
+        @media (prefers-color-scheme: dark) {
+          :host {
+            --color-background: rgb(28, 28, 30);
+            --color-font: white;
+            --color-backdrop: rgb(44, 44, 46);
+
+            --color-stack-h6: rgb(200, 200, 204);
+            --color-stack-headline: rgb(99, 99, 102);
+            --color-stack-subline: rgba(142, 142, 147);
+
+            --color-accents-3: rgb(118, 118, 118);
+          }
+        }
+
         .mono {
           font-family: var(--font-stack-monospace);
         }