[DevOverlay] Add Turbopack story for Error Containers

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

@@ -43,6 +43,8 @@ export default class ReactDevOverlay extends React.PureComponent<
     const hasStaticIndicator = state.staticIndicator
     const debugInfo = state.debugInfo
 
+    const isTurbopack = !!process.env.TURBOPACK
+
     return (
       <>
         {isReactError ? (
@@ -61,15 +63,17 @@ export default class ReactDevOverlay extends React.PureComponent<
           {state.rootLayoutMissingTags?.length ? (
             <RootLayoutMissingTagsError
               missingTags={state.rootLayoutMissingTags}
+              isTurbopack={isTurbopack}
             />
           ) : hasBuildError ? (
             <BuildError
               message={state.buildError!}
               versionInfo={state.versionInfo}
+              isTurbopack={isTurbopack}
             />
           ) : (
             <Errors
-              isTurbopackEnabled={!!process.env.TURBOPACK}
+              isTurbopack={isTurbopack}
               isAppDir={true}
               initialDisplayState={isReactError ? 'fullscreen' : 'minimized'}
               errors={state.errors}

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

@@ -15,14 +15,14 @@ export function DevToolsIndicator({
   readyErrors,
   fullscreen,
   hide,
-  isTurbopackEnabled,
+  isTurbopack,
 }: {
   versionInfo: VersionInfo | undefined
   readyErrors: ReadyRuntimeError[]
   fullscreen: () => void
   hide: () => void
   hasStaticIndicator?: boolean
-  isTurbopackEnabled: boolean
+  isTurbopack: boolean
 }) {
   return (
     <DevToolsPopover
@@ -31,7 +31,7 @@ export function DevToolsIndicator({
       issueCount={readyErrors.length}
       isStaticRoute={hasStaticIndicator === true}
       hide={hide}
-      isTurbopackEnabled={isTurbopackEnabled}
+      isTurbopack={isTurbopack}
     />
   )
 }
@@ -42,14 +42,14 @@ const DevToolsPopover = ({
   isStaticRoute,
   hide,
   semver,
-  isTurbopackEnabled,
+  isTurbopack,
 }: {
   onIssuesClick: () => void
   issueCount: number
   isStaticRoute: boolean
   hide: () => void
   semver: string | undefined
-  isTurbopackEnabled: boolean
+  isTurbopack: boolean
 }) => {
   // TODO: close when clicking outside
 
@@ -111,7 +111,7 @@ const DevToolsPopover = ({
               ) : null}
 
               <p data-nextjs-dev-tools-version>
-                Turbopack {isTurbopackEnabled ? 'enabled' : 'not enabled'}
+                Turbopack {isTurbopack ? 'enabled' : 'not enabled'}
               </p>
             </div>
           </div>

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

@@ -66,7 +66,7 @@ export function ErrorOverlayLayout({
   activeIdx,
   setActiveIndex,
   footerMessage,
-  isTurbopack = !!process.env.TURBOPACK,
+  isTurbopack,
 }: ErrorOverlayLayoutProps) {
   return (
     <Overlay fixed={isBuildError}>

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

@@ -31,3 +31,10 @@ Expected identError: Failed to resolve import "./missing-module"`,
     },
   },
 }
+
+export const Turbopack: Story = {
+  args: {
+    ...Default.args,
+    isTurbopack: true,
+  },
+}

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

@@ -4,11 +4,16 @@ import { Terminal } from '../components/Terminal'
 import { noop as css } from '../helpers/noop-template'
 import { ErrorOverlayLayout } from '../components/Errors/error-overlay-layout/error-overlay-layout'
 
-export type BuildErrorProps = { message: string; versionInfo?: VersionInfo }
+export type BuildErrorProps = {
+  message: string
+  isTurbopack: boolean
+  versionInfo?: VersionInfo
+}
 
 export const BuildError: React.FC<BuildErrorProps> = function BuildError({
   message,
   versionInfo,
+  isTurbopack,
 }) {
   const noop = React.useCallback(() => {}, [])
   return (
@@ -18,6 +23,7 @@ export const BuildError: React.FC<BuildErrorProps> = function BuildError({
       onClose={noop}
       versionInfo={versionInfo}
       footerMessage="This error occurred during the build process and can only be dismissed by fixing the error."
+      isTurbopack={isTurbopack}
     >
       <Terminal content={message} />
     </ErrorOverlayLayout>

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

@@ -74,7 +74,14 @@ export const Default: Story = {
     },
     initialDisplayState: 'fullscreen',
     hasStaticIndicator: true,
-    isTurbopackEnabled: true,
+    isTurbopack: true,
+  },
+}
+
+export const Turbopack: Story = {
+  args: {
+    ...Default.args,
+    isTurbopack: true,
   },
 }
 

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

@@ -35,10 +35,10 @@ export type ErrorsProps = {
   isAppDir: boolean
   errors: SupportedErrorEvent[]
   initialDisplayState: DisplayState
+  isTurbopack: boolean
   versionInfo?: VersionInfo
   hasStaticIndicator?: boolean
   debugInfo?: DebugInfo
-  isTurbopackEnabled: boolean
 }
 
 type ReadyErrorEvent = ReadyRuntimeError
@@ -110,7 +110,7 @@ export function Errors({
   hasStaticIndicator,
   debugInfo,
   versionInfo,
-  isTurbopackEnabled,
+  isTurbopack,
 }: ErrorsProps) {
   const [lookups, setLookups] = useState(
     {} as { [eventId: string]: ReadyErrorEvent }
@@ -214,7 +214,7 @@ export function Errors({
         fullscreen={fullscreen}
         hide={hide}
         versionInfo={versionInfo}
-        isTurbopackEnabled={isTurbopackEnabled}
+        isTurbopack={isTurbopack}
       />
     )
   }
@@ -272,6 +272,7 @@ export function Errors({
       setActiveIndex={setActiveIndex}
       footerMessage={footerMessage}
       versionInfo={versionInfo}
+      isTurbopack={isTurbopack}
     >
       <div className="error-overlay-notes-container">
         {notes ? (

packages/next/src/client/components/react-dev-overlay/_experimental/internal/container/RootLayoutMissingTagsError.stories.tsx

@@ -32,3 +32,10 @@ export const SingleTag: Story = {
     },
   },
 }
+
+export const Turbopack: Story = {
+  args: {
+    ...Default.args,
+    isTurbopack: true,
+  },
+}

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

@@ -5,11 +5,13 @@ import { ErrorOverlayLayout } from '../components/Errors/error-overlay-layout/er
 
 type RootLayoutMissingTagsErrorProps = {
   missingTags: string[]
+  isTurbopack: boolean
   versionInfo?: VersionInfo
 }
 
 export function RootLayoutMissingTagsError({
   missingTags,
+  isTurbopack,
   versionInfo,
 }: RootLayoutMissingTagsErrorProps) {
   const noop = useCallback(() => {}, [])
@@ -27,6 +29,7 @@ export function RootLayoutMissingTagsError({
       }
       onClose={noop}
       versionInfo={versionInfo}
+      isTurbopack={isTurbopack}
     />
   )
 }

packages/next/src/client/components/react-dev-overlay/_experimental/pages/ReactDevOverlay.tsx

@@ -26,6 +26,8 @@ export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
     onComponentError,
   } = usePagesReactDevOverlay()
 
+  const isTurbopack = !!process.env.TURBOPACK
+
   return (
     <>
       <ErrorBoundary isMounted={isMounted} onError={onComponentError}>
@@ -41,22 +43,23 @@ export default function ReactDevOverlay({ children }: ReactDevOverlayProps) {
           <BuildError
             message={state.buildError!}
             versionInfo={state.versionInfo}
+            isTurbopack={isTurbopack}
           />
         ) : hasRuntimeErrors ? (
           <Errors
             isAppDir={false}
             errors={state.errors}
             versionInfo={state.versionInfo}
             initialDisplayState={'fullscreen'}
-            isTurbopackEnabled={!!process.env.TURBOPACK}
+            isTurbopack={isTurbopack}
           />
         ) : (
           <Errors
             isAppDir={false}
             errors={state.errors}
             versionInfo={state.versionInfo}
             initialDisplayState={'minimized'}
-            isTurbopackEnabled={!!process.env.TURBOPACK}
+            isTurbopack={isTurbopack}
           />
         )}
       </ShadowPortal>