[DevOverlay] Decouple Error Overlay with DevTools Indicator

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

@@ -0,0 +1,49 @@
+import type { OverlayState } from '../../../../../shared'
+
+import { BuildError } from '../../../container/BuildError'
+import { Errors } from '../../../container/Errors'
+
+export function ErrorOverlay({ state }: { state: OverlayState }) {
+  const isTurbopack = !!process.env.TURBOPACK
+
+  // This occurs only at the App Router, so dynamic require the component.
+  if (!!state.rootLayoutMissingTags?.length) {
+    const { RootLayoutMissingTagsError } =
+      require('../../../container/RootLayoutMissingTagsError') as typeof import('../../../container/RootLayoutMissingTagsError')
+
+    return (
+      <RootLayoutMissingTagsError
+        missingTags={state.rootLayoutMissingTags}
+        versionInfo={state.versionInfo}
+        isTurbopack={isTurbopack}
+      />
+    )
+  }
+
+  if (state.buildError !== null) {
+    return (
+      <BuildError
+        message={state.buildError}
+        versionInfo={state.versionInfo}
+        isTurbopack={isTurbopack}
+      />
+    )
+  }
+
+  // No Runtime Errors.
+  if (!state.errors.length) {
+    return null
+  }
+
+  return (
+    <Errors
+      isTurbopack={isTurbopack}
+      isAppDir={true}
+      initialDisplayState={isReactError ? 'fullscreen' : 'minimized'}
+      errors={state.errors}
+      versionInfo={state.versionInfo}
+      hasStaticIndicator={hasStaticIndicator}
+      debugInfo={debugInfo}
+    />
+  )
+}