merge pages and app overlays (#60899)

### What

Merges the package into the internal overlay.


### Detailed Changes

* Move `@next/react-dev-overlay` into next package and rename the import
paths.
* Fix the `getErrorSource` symbol issue, use `Symbol.for()` instead of
`Symbol`
* Extra `getErrorSource` into single lib as it's being used in a lot of
places, this will keep the same bundle size

Closes PACK-2261
Closes NEXT-1977

---------

Co-authored-by: Jiachi Liu <[email protected]>

Author: ForsakenHarmony

packages/next/package.json

@@ -147,7 +147,6 @@
     "@napi-rs/triples": "1.2.0",
     "@next/polyfill-module": "14.1.1-canary.52",
     "@next/polyfill-nomodule": "14.1.1-canary.52",
-    "@next/react-dev-overlay": "14.1.1-canary.52",
     "@next/react-refresh-utils": "14.1.1-canary.52",
     "@next/swc": "14.1.1-canary.52",
     "@opentelemetry/api": "1.6.0",

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

@@ -302,7 +302,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

@@ -157,9 +157,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) {
@@ -236,12 +236,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

@@ -619,8 +619,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 renamed to 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 renamed to 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 renamed to packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -7,41 +7,41 @@ 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'
+} 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,
   TurbopackMsgToBrowser,
-} from '../../../server/dev/hot-reloader-types'
-import { extractModulesFromTurbopackMessage } from '../../../server/dev/extract-modules-from-turbopack-message'
+} from '../../../../server/dev/hot-reloader-types'
+import { extractModulesFromTurbopackMessage } from '../../../../server/dev/extract-modules-from-turbopack-message'
 
 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/LeftRightDialogHeader.tsx

@@ -147,7 +147,6 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> =
               />
             </svg>
           </button>
-          &nbsp;
           {children}
         </nav>
         {close ? (