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/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/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/react-dev-overlay/src/internal/ReactDevOverlay.tsx → packages/next/src/client/components/react-dev-overlay/pages/ReactDevOverlay.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 
 import * as Bus from './bus'
-import { ShadowPortal } from './components/ShadowPortal'
-import { BuildError } from './container/BuildError'
-import type { SupportedErrorEvent } from './container/Errors'
-import { Errors } from './container/Errors'
+import { ShadowPortal } from '../internal/components/ShadowPortal'
+import { BuildError } from '../internal/container/BuildError'
+import type { SupportedErrorEvent } from '../internal/container/Errors'
+import { Errors } from '../internal/container/Errors'
 import { ErrorBoundary } from './ErrorBoundary'
-import { Base } from './styles/Base'
-import { ComponentStyles } from './styles/ComponentStyles'
-import { CssReset } from './styles/CssReset'
+import { Base } from '../internal/styles/Base'
+import { ComponentStyles } from '../internal/styles/ComponentStyles'
+import { CssReset } from '../internal/styles/CssReset'
 
 type RefreshState =
   | {
@@ -174,7 +174,7 @@ const ReactDevOverlay: React.FunctionComponent<ReactDevOverlayProps> =
           {children ?? null}
         </ErrorBoundary>
         {isMounted ? (
-          <ShadowPortal globalOverlay={globalOverlay}>
+          <ShadowPortal>
             <CssReset />
             <Base />
             <ComponentStyles />
@@ -185,7 +185,11 @@ const ReactDevOverlay: React.FunctionComponent<ReactDevOverlayProps> =
             ) ? null : hasBuildError ? (
               <BuildError message={state.buildError!} />
             ) : hasRuntimeErrors ? (
-              <Errors errors={state.errors} />
+              <Errors
+                isAppDir={false}
+                errors={state.errors}
+                initialDisplayState={'fullscreen'}
+              />
             ) : undefined}
           </ShadowPortal>
         ) : undefined}

packages/react-dev-overlay/src/internal/bus.ts → packages/next/src/client/components/react-dev-overlay/pages/bus.ts

@@ -1,4 +1,4 @@
-import type { StackFrame } from 'stacktrace-parser'
+import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'
 
 export const TYPE_BUILD_OK = 'build-ok'
 export const TYPE_BUILD_ERROR = 'build-error'

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

@@ -1,11 +1,11 @@
-import * as Bus from './internal/bus'
-import { parseStack } from './internal/helpers/parseStack'
-import { parseComponentStack } from 'next/dist/client/components/react-dev-overlay/internal/helpers/parse-component-stack'
+import * as Bus from './bus'
+import { parseStack } from '../internal/helpers/parseStack'
+import { parseComponentStack } from '../internal/helpers/parse-component-stack'
 import {
   hydrationErrorComponentStack,
   hydrationErrorWarning,
   patchConsoleError,
-} from 'next/dist/client/components/react-dev-overlay/internal/helpers/hydration-error-info'
+} from '../internal/helpers/hydration-error-info'
 
 // Patch console.error to collect information about hydration errors
 patchConsoleError()
@@ -114,9 +114,9 @@ function onBeforeRefresh() {
   Bus.emit({ type: Bus.TYPE_BEFORE_REFRESH })
 }
 
-export { getErrorByType } from './internal/helpers/getErrorByType'
-export { getServerError } from './internal/helpers/nodeStackFrames'
-export { default as ReactDevOverlay } from './internal/ReactDevOverlay'
+export { getErrorByType } from '../internal/helpers/getErrorByType'
+export { getServerError } from '../internal/helpers/nodeStackFrames'
+export { default as ReactDevOverlay } from './ReactDevOverlay'
 export {
   onBuildOk,
   onBuildError,