separate util into one module

packages/next/src/client/components/react-dev-overlay/internal/helpers/attach-hydration-error-state.ts

@@ -0,0 +1,48 @@
+import {
+  isHydrationError,
+  getDefaultHydrationErrorMessage,
+} from '../../../is-hydration-error'
+import {
+  hydrationErrorState,
+  getReactHydrationDiffSegments,
+} from './hydration-error-info'
+
+export function attachHydrationErrorState(error: Error) {
+  if (
+    isHydrationError(error) &&
+    !error.message.includes(
+      'https://nextjs.org/docs/messages/react-hydration-error'
+    )
+  ) {
+    const reactHydrationDiffSegments = getReactHydrationDiffSegments(
+      error.message
+    )
+    let parsedHydrationErrorState: typeof hydrationErrorState = {}
+    if (reactHydrationDiffSegments) {
+      parsedHydrationErrorState = {
+        ...(error as any).details,
+        ...hydrationErrorState,
+        warning: hydrationErrorState.warning || [
+          getDefaultHydrationErrorMessage(),
+        ],
+        notes: reactHydrationDiffSegments[0],
+        reactOutputComponentDiff: reactHydrationDiffSegments[1],
+      }
+    } else {
+      // If there's any extra information in the error message to display,
+      // append it to the error message details property
+      if (hydrationErrorState.warning) {
+        // The patched console.error found hydration errors logged by React
+        // Append the logged warning to the error message
+        parsedHydrationErrorState = {
+          ...(error as any).details,
+          // It contains the warning, component stack, server and client tag names
+          ...hydrationErrorState,
+        }
+      }
+      error.message +=
+        '\nSee more info here: https://nextjs.org/docs/messages/react-hydration-error'
+    }
+    ;(error as any).details = parsedHydrationErrorState
+  }
+}

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-error-handler.ts

@@ -1,13 +1,8 @@
 import { useEffect } from 'react'
-import {
-  hydrationErrorState,
-  getReactHydrationDiffSegments,
-} from './hydration-error-info'
+
 import { isNextRouterError } from '../../../is-next-router-error'
-import {
-  isHydrationError,
-  getDefaultHydrationErrorMessage,
-} from '../../../is-hydration-error'
+import { isHydrationError } from '../../../is-hydration-error'
+import { attachHydrationErrorState } from './attach-hydration-error-state'
 
 export type ErrorHandler = (error: Error) => void
 
@@ -24,48 +19,6 @@ const rejectionQueue: Array<Error> = []
 const errorHandlers: Array<ErrorHandler> = []
 const rejectionHandlers: Array<ErrorHandler> = []
 
-export function attachHydrationErrorState(error: Error) {
-  if (
-    isHydrationError(error) &&
-    !error.message.includes(
-      'https://nextjs.org/docs/messages/react-hydration-error'
-    )
-  ) {
-    const reactHydrationDiffSegments = getReactHydrationDiffSegments(
-      error.message
-    )
-    let parsedHydrationErrorState: typeof hydrationErrorState = {}
-    if (reactHydrationDiffSegments) {
-      parsedHydrationErrorState = {
-        ...(error as any).details,
-        ...hydrationErrorState,
-        warning: hydrationErrorState.warning || [
-          getDefaultHydrationErrorMessage(),
-        ],
-        notes: reactHydrationDiffSegments[0],
-        reactOutputComponentDiff: reactHydrationDiffSegments[1],
-      }
-    } else {
-      // If there's any extra information in the error message to display,
-      // append it to the error message details property
-      if (hydrationErrorState.warning) {
-        // The patched console.error found hydration errors logged by React
-        // Append the logged warning to the error message
-        parsedHydrationErrorState = {
-          ...(error as any).details,
-          // It contains the warning, component stack, server and client tag names
-          ...hydrationErrorState,
-        }
-      }
-      error.message +=
-        '\nSee more info here: https://nextjs.org/docs/messages/react-hydration-error'
-    }
-    ;(error as any).details = parsedHydrationErrorState
-  }
-
-  return error
-}
-
 export function handleClientError(error: unknown) {
   if (!error || !(error instanceof Error) || typeof error.stack !== 'string') {
     // A non-error was thrown, we don't have anything to show. :-(

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

@@ -15,7 +15,7 @@ import {
   ACTION_VERSION_INFO,
 } from '../shared'
 import type { VersionInfo } from '../../../../server/dev/parse-version-info'
-import { attachHydrationErrorState } from '../internal/helpers/use-error-handler'
+import { attachHydrationErrorState } from '../internal/helpers/attach-hydration-error-state'
 
 let isRegistered = false
 let stackTraceLimit: number | undefined = undefined