next 15.2.0-canary.51 → 15.2.0-canary.52

package/dist/client/components/react-dev-overlay/internal/container/Errors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/container/Errors.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useCallback, Suspense } from 'react'\nimport {\n  ACTION_UNHANDLED_ERROR,\n  ACTION_UNHANDLED_REJECTION,\n  type UnhandledErrorAction,\n  type UnhandledRejectionAction,\n} from '../../shared'\nimport type { DebugInfo } from '../../types'\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogHeader,\n} from '../components/Dialog'\nimport { LeftRightDialogHeader } from '../components/LeftRightDialogHeader'\nimport { Overlay } from '../components/Overlay'\nimport { Toast } from '../components/Toast'\nimport { getErrorByType } from '../helpers/get-error-by-type'\nimport type { ReadyRuntimeError } from '../helpers/get-error-by-type'\nimport { noop as css } from '../helpers/noop-template'\nimport { CloseIcon } from '../icons/CloseIcon'\nimport { RuntimeError } from './RuntimeError'\nimport { VersionStalenessInfo } from '../components/VersionStalenessInfo'\nimport type { VersionInfo } from '../../../../../server/dev/parse-version-info'\nimport { getErrorSource } from '../../../../../shared/lib/error-source'\nimport { HotlinkedText } from '../components/hot-linked-text'\nimport { PseudoHtmlDiff } from './RuntimeError/component-stack-pseudo-html'\nimport {\n  type HydrationErrorState,\n  getHydrationWarningType,\n} from '../../../errors/hydration-error-info'\nimport { NodejsInspectorCopyButton } from '../components/nodejs-inspector'\nimport { CopyButton } from '../components/copy-button'\nimport {\n  getUnhandledErrorType,\n  isUnhandledConsoleOrRejection,\n} from '../../../errors/console-error'\nimport { extractNextErrorCode } from '../../../../../lib/error-telemetry-utils'\n\nexport type SupportedErrorEvent = {\n  id: number\n  event: UnhandledErrorAction | UnhandledRejectionAction\n}\nexport type ErrorsProps = {\n  isAppDir: boolean\n  errors: SupportedErrorEvent[]\n  initialDisplayState: DisplayState\n  versionInfo?: VersionInfo\n  hasStaticIndicator?: boolean\n  debugInfo?: DebugInfo\n}\n\ntype ReadyErrorEvent = ReadyRuntimeError\n\ntype DisplayState = 'minimized' | 'fullscreen' | 'hidden'\n\nfunction isNextjsLink(text: string): boolean {\n  return text.startsWith('https://nextjs.org')\n}\n\nfunction ErrorDescription({\n  error,\n  hydrationWarning,\n}: {\n  error: Error\n  hydrationWarning: string | null\n}) {\n  const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error)\n  const unhandledErrorType = isUnhandledOrReplayError\n    ? getUnhandledErrorType(error)\n    : null\n  const isConsoleErrorStringMessage = unhandledErrorType === 'string'\n  // If the error is:\n  // - hydration warning\n  // - captured console error or unhandled rejection\n  // skip displaying the error name\n  const title =\n    (isUnhandledOrReplayError && isConsoleErrorStringMessage) ||\n    hydrationWarning\n      ? ''\n      : error.name + ': '\n\n  // If it's replayed error, display the environment name\n  const environmentName =\n    'environmentName' in error ? error['environmentName'] : ''\n  const envPrefix = environmentName ? `[ ${environmentName} ] ` : ''\n  return (\n    <>\n      {envPrefix}\n      {title}\n      <HotlinkedText\n        text={hydrationWarning || error.message}\n        matcher={isNextjsLink}\n      />\n    </>\n  )\n}\n\nfunction getErrorSignature(ev: SupportedErrorEvent): string {\n  const { event } = ev\n  switch (event.type) {\n    case ACTION_UNHANDLED_ERROR:\n    case ACTION_UNHANDLED_REJECTION: {\n      return `${event.reason.name}::${event.reason.message}::${event.reason.stack}`\n    }\n    default: {\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const _: never = event\n  return ''\n}\n\nexport function Errors({\n  isAppDir,\n  errors,\n  initialDisplayState,\n  versionInfo,\n  hasStaticIndicator,\n  debugInfo,\n}: ErrorsProps) {\n  const [lookups, setLookups] = useState(\n    {} as { [eventId: string]: ReadyErrorEvent }\n  )\n\n  const [readyErrors, nextError] = useMemo<\n    [ReadyErrorEvent[], SupportedErrorEvent | null]\n  >(() => {\n    let ready: ReadyErrorEvent[] = []\n    let next: SupportedErrorEvent | null = null\n\n    // Ensure errors are displayed in the order they occurred in:\n    for (let idx = 0; idx < errors.length; ++idx) {\n      const e = errors[idx]\n      const { id } = e\n      if (id in lookups) {\n        ready.push(lookups[id])\n        continue\n      }\n\n      // Check for duplicate errors\n      if (idx > 0) {\n        const prev = errors[idx - 1]\n        if (getErrorSignature(prev) === getErrorSignature(e)) {\n          continue\n        }\n      }\n\n      next = e\n      break\n    }\n\n    return [ready, next]\n  }, [errors, lookups])\n\n  const isLoading = useMemo<boolean>(() => {\n    return readyErrors.length < 1 && Boolean(errors.length)\n  }, [errors.length, readyErrors.length])\n\n  useEffect(() => {\n    if (nextError == null) {\n      return\n    }\n\n    let mounted = true\n    getErrorByType(nextError, isAppDir).then((resolved) => {\n      if (mounted) {\n        // We don't care if the desired error changed while we were resolving,\n        // thus we're not tracking it using a ref. Once the work has been done,\n        // we'll store it.\n        setLookups((m) => ({ ...m, [resolved.id]: resolved }))\n      }\n    })\n\n    return () => {\n      mounted = false\n    }\n  }, [nextError, isAppDir])\n\n  const [displayState, setDisplayState] =\n    useState<DisplayState>(initialDisplayState)\n  const [activeIdx, setActiveIndex] = useState<number>(0)\n  const previous = useCallback(\n    () => setActiveIndex((v) => Math.max(0, v - 1)),\n    []\n  )\n  const next = useCallback(\n    () =>\n      setActiveIndex((v) =>\n        Math.max(0, Math.min(readyErrors.length - 1, v + 1))\n      ),\n    [readyErrors.length]\n  )\n\n  const activeError = useMemo<ReadyErrorEvent | null>(\n    () => readyErrors[activeIdx] ?? null,\n    [activeIdx, readyErrors]\n  )\n\n  // Reset component state when there are no errors to be displayed.\n  // This should never happen, but lets handle it.\n  useEffect(() => {\n    if (errors.length < 1) {\n      setLookups({})\n      setDisplayState('hidden')\n      setActiveIndex(0)\n    }\n  }, [errors.length])\n\n  const minimize = useCallback(() => setDisplayState('minimized'), [])\n  const hide = useCallback(() => setDisplayState('hidden'), [])\n  const fullscreen = useCallback(() => setDisplayState('fullscreen'), [])\n\n  // This component shouldn't be rendered with no errors, but if it is, let's\n  // handle it gracefully by rendering nothing.\n  if (errors.length < 1 || activeError == null) {\n    return null\n  }\n\n  if (isLoading) {\n    // TODO: better loading state\n    return <Overlay />\n  }\n\n  if (displayState === 'hidden') {\n    return null\n  }\n\n  if (displayState === 'minimized') {\n    return (\n      <Toast\n        data-nextjs-toast\n        data-issues\n        className={`nextjs-toast-errors-parent${hasStaticIndicator ? ' nextjs-error-with-static' : ''}`}\n        onClick={fullscreen}\n      >\n        <div className=\"nextjs-toast-errors\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n          </svg>\n          <span>\n            <span data-issues-count>{readyErrors.length}</span> issue\n            {readyErrors.length > 1 ? 's' : ''}\n          </span>\n          <button\n            data-nextjs-toast-errors-hide-button\n            className=\"nextjs-toast-hide-button\"\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              hide()\n            }}\n            aria-label=\"Hide Issues\"\n          >\n            <CloseIcon />\n          </button>\n        </div>\n      </Toast>\n    )\n  }\n\n  const error = activeError.error\n  const isServerError = ['server', 'edge-server'].includes(\n    getErrorSource(error) || ''\n  )\n  const isUnhandledError = isUnhandledConsoleOrRejection(error)\n  const errorDetails: HydrationErrorState = (error as any).details || {}\n  const notes = errorDetails.notes || ''\n  const [warningTemplate, serverContent, clientContent] =\n    errorDetails.warning || [null, '', '']\n\n  const hydrationErrorType = getHydrationWarningType(warningTemplate)\n  const hydrationWarning = warningTemplate\n    ? warningTemplate\n        .replace('%s', serverContent)\n        .replace('%s', clientContent)\n        .replace('%s', '') // remove the %s for stack\n        .replace(/%s$/, '') // If there's still a %s at the end, remove it\n        .replace(/^Warning: /, '')\n        .replace(/^Error: /, '')\n    : null\n\n  return (\n    <Overlay>\n      <Dialog\n        type=\"error\"\n        aria-labelledby=\"nextjs__container_errors_label\"\n        aria-describedby=\"nextjs__container_errors_desc\"\n        onClose={isServerError ? undefined : minimize}\n      >\n        <DialogContent>\n          <DialogHeader className=\"nextjs-container-errors-header\">\n            <LeftRightDialogHeader\n              previous={activeIdx > 0 ? previous : null}\n              next={activeIdx < readyErrors.length - 1 ? next : null}\n              close={isServerError ? undefined : minimize}\n            >\n              <small>\n                <span>{activeIdx + 1}</span> of{' '}\n                <span data-nextjs-dialog-header-total-count>\n                  {readyErrors.length}\n                </span>\n                {' issue'}\n                {readyErrors.length < 2 ? '' : 's'}\n              </small>\n              <VersionStalenessInfo versionInfo={versionInfo} />\n            </LeftRightDialogHeader>\n\n            <div\n              className=\"nextjs__container_errors__error_title\"\n              data-nextjs-error-code={extractNextErrorCode(error)} // allow assertion in tests before error rating is implemented\n            >\n              <h1\n                id=\"nextjs__container_errors_label\"\n                className=\"nextjs__container_errors_label\"\n              >\n                {isServerError\n                  ? 'Server Error'\n                  : isUnhandledError\n                    ? 'Console Error'\n                    : 'Unhandled Runtime Error'}\n              </h1>\n              <span>\n                <CopyButton\n                  data-nextjs-data-runtime-error-copy-stack\n                  actionLabel=\"Copy error stack\"\n                  successLabel=\"Copied\"\n                  content={error.stack || ''}\n                  disabled={!error.stack}\n                />\n\n                <NodejsInspectorCopyButton\n                  devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}\n                />\n              </span>\n            </div>\n            <p\n              id=\"nextjs__container_errors_desc\"\n              className=\"nextjs__container_errors_desc\"\n            >\n              <ErrorDescription\n                error={error}\n                hydrationWarning={hydrationWarning}\n              />\n            </p>\n            {notes ? (\n              <>\n                <p\n                  id=\"nextjs__container_errors__notes\"\n                  className=\"nextjs__container_errors__notes\"\n                >\n                  {notes}\n                </p>\n              </>\n            ) : null}\n            {hydrationWarning ? (\n              <p\n                id=\"nextjs__container_errors__link\"\n                className=\"nextjs__container_errors__link\"\n              >\n                <HotlinkedText text=\"See more info here: https://nextjs.org/docs/messages/react-hydration-error\" />\n              </p>\n            ) : null}\n\n            {hydrationWarning &&\n            (activeError.componentStackFrames?.length ||\n              !!errorDetails.reactOutputComponentDiff) ? (\n              <PseudoHtmlDiff\n                className=\"nextjs__container_errors__component-stack\"\n                hydrationMismatchType={hydrationErrorType}\n                componentStackFrames={activeError.componentStackFrames || []}\n                firstContent={serverContent}\n                secondContent={clientContent}\n                reactOutputComponentDiff={errorDetails.reactOutputComponentDiff}\n              />\n            ) : null}\n            {isServerError ? (\n              <div>\n                <small>\n                  This error happened while generating the page. Any console\n                  logs will be displayed in the terminal window.\n                </small>\n              </div>\n            ) : undefined}\n          </DialogHeader>\n          <Suspense fallback={<div data-nextjs-error-suspended />}>\n            <DialogBody className=\"nextjs-container-errors-body\">\n              <RuntimeError\n                key={activeError.id.toString()}\n                error={activeError}\n              />\n            </DialogBody>\n          </Suspense>\n        </DialogContent>\n      </Dialog>\n    </Overlay>\n  )\n}\n\nexport const styles = css`\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  .nextjs-container-errors-header {\n    position: relative;\n  }\n  .nextjs-container-errors-header > h1 {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: calc(var(--size-gap-double) * 1.5) 0;\n    color: var(--color-title-h1);\n  }\n  .nextjs-container-errors-header small {\n    font-size: var(--size-font-small);\n    color: var(--color-accents-1);\n    margin-left: var(--size-gap-double);\n  }\n  .nextjs-container-errors-header small > span {\n    font-family: var(--font-stack-monospace);\n  }\n  .nextjs-container-errors-header p {\n    font-size: var(--size-font-small);\n    line-height: var(--size-font-big);\n    white-space: pre-wrap;\n  }\n  .nextjs__container_errors_desc {\n    font-family: var(--font-stack-monospace);\n    padding: var(--size-gap) var(--size-gap-double);\n    border-left: 2px solid var(--color-text-color-red-1);\n    margin-top: var(--size-gap);\n    font-weight: bold;\n    color: var(--color-text-color-red-1);\n    background-color: var(--color-text-background-red-1);\n  }\n  p.nextjs__container_errors__link {\n    margin: var(--size-gap-double) auto;\n    color: var(--color-text-color-red-1);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  p.nextjs__container_errors__notes {\n    margin: var(--size-gap-double) auto;\n    color: var(--color-stack-notes);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  .nextjs-container-errors-header > div > small {\n    margin: 0;\n    margin-top: var(--size-gap-half);\n  }\n  .nextjs-container-errors-header > p > a {\n    color: inherit;\n    font-weight: bold;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs__container_errors__component-stack {\n    padding: 12px 32px;\n    color: var(--color-ansi-fg);\n    background: var(--color-ansi-bg);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs-container-errors-header\n    > .nextjs-container-build-error-version-status {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .nextjs-data-runtime-error-inspect-link,\n  .nextjs-data-runtime-error-inspect-link:hover {\n    margin: 0 8px;\n    color: inherit;\n  }\n`\n"],"names":["Errors","styles","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","isUnhandledConsoleOrRejection","unhandledErrorType","getUnhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","HotlinkedText","message","matcher","getErrorSignature","ev","event","type","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","reason","stack","_","isAppDir","errors","initialDisplayState","versionInfo","hasStaticIndicator","debugInfo","activeError","lookups","setLookups","useState","readyErrors","nextError","useMemo","ready","next","idx","length","e","id","push","prev","isLoading","Boolean","useEffect","mounted","getErrorByType","then","resolved","m","displayState","setDisplayState","activeIdx","setActiveIndex","previous","useCallback","v","Math","max","min","minimize","hide","fullscreen","Overlay","Toast","data-nextjs-toast","data-issues","className","onClick","div","svg","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","circle","cx","cy","r","line","x1","y1","x2","y2","span","data-issues-count","button","data-nextjs-toast-errors-hide-button","stopPropagation","aria-label","CloseIcon","isServerError","includes","getErrorSource","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","getHydrationWarningType","replace","Dialog","aria-labelledby","aria-describedby","onClose","undefined","DialogContent","DialogHeader","LeftRightDialogHeader","close","small","data-nextjs-dialog-header-total-count","VersionStalenessInfo","data-nextjs-error-code","extractNextErrorCode","h1","CopyButton","data-nextjs-data-runtime-error-copy-stack","actionLabel","successLabel","content","disabled","NodejsInspectorCopyButton","devtoolsFrontendUrl","p","componentStackFrames","reactOutputComponentDiff","PseudoHtmlDiff","hydrationMismatchType","firstContent","secondContent","Suspense","fallback","data-nextjs-error-suspended","DialogBody","RuntimeError","toString","css"],"mappings":";;;;;;;;;;;;;;;IAkHgBA,MAAM;eAANA;;IA0SHC,MAAM;eAANA;;;;;uBA5ZuD;wBAM7D;wBAOA;uCAC+B;yBACd;uBACF;gCACS;8BAEH;2BACF;8BACG;sCACQ;6BAEN;+BACD;0CACC;oCAIxB;iCACmC;4BACf;8BAIpB;qCAC8B;;;;;;;;;;AAmBrC,SAASC,aAAaC,IAAY;IAChC,OAAOA,KAAKC,UAAU,CAAC;AACzB;AAEA,SAASC,iBAAiB,KAMzB;IANyB,IAAA,EACxBC,KAAK,EACLC,gBAAgB,EAIjB,GANyB;IAOxB,MAAMC,2BAA2BC,IAAAA,2CAA6B,EAACH;IAC/D,MAAMI,qBAAqBF,2BACvBG,IAAAA,mCAAqB,EAACL,SACtB;IACJ,MAAMM,8BAA8BF,uBAAuB;IAC3D,mBAAmB;IACnB,sBAAsB;IACtB,kDAAkD;IAClD,iCAAiC;IACjC,MAAMG,QACJ,AAACL,4BAA4BI,+BAC7BL,mBACI,KACAD,MAAMQ,IAAI,GAAG;IAEnB,uDAAuD;IACvD,MAAMC,kBACJ,qBAAqBT,QAAQA,KAAK,CAAC,kBAAkB,GAAG;IAC1D,MAAMU,YAAYD,kBAAkB,AAAC,OAAIA,kBAAgB,QAAO;IAChE,qBACE;;YACGC;YACAH;0BACD,qBAACI,4BAAa;gBACZd,MAAMI,oBAAoBD,MAAMY,OAAO;gBACvCC,SAASjB;;;;AAIjB;AAEA,SAASkB,kBAAkBC,EAAuB;IAChD,MAAM,EAAEC,KAAK,EAAE,GAAGD;IAClB,OAAQC,MAAMC,IAAI;QAChB,KAAKC,8BAAsB;QAC3B,KAAKC,kCAA0B;YAAE;gBAC/B,OAAO,AAAGH,MAAMI,MAAM,CAACZ,IAAI,GAAC,OAAIQ,MAAMI,MAAM,CAACR,OAAO,GAAC,OAAII,MAAMI,MAAM,CAACC,KAAK;YAC7E;QACA;YAAS,CACT;IACF;IAEA,6DAA6D;IAC7D,MAAMC,IAAWN;IACjB,OAAO;AACT;AAEO,SAAStB,OAAO,KAOT;IAPS,IAAA,EACrB6B,QAAQ,EACRC,MAAM,EACNC,mBAAmB,EACnBC,WAAW,EACXC,kBAAkB,EAClBC,SAAS,EACG,GAPS;QAwQVC;IAhQX,MAAM,CAACC,SAASC,WAAW,GAAGC,IAAAA,eAAQ,EACpC,CAAC;IAGH,MAAM,CAACC,aAAaC,UAAU,GAAGC,IAAAA,cAAO,EAEtC;QACA,IAAIC,QAA2B,EAAE;QACjC,IAAIC,OAAmC;QAEvC,6DAA6D;QAC7D,IAAK,IAAIC,MAAM,GAAGA,MAAMd,OAAOe,MAAM,EAAE,EAAED,IAAK;YAC5C,MAAME,IAAIhB,MAAM,CAACc,IAAI;YACrB,MAAM,EAAEG,EAAE,EAAE,GAAGD;YACf,IAAIC,MAAMX,SAAS;gBACjBM,MAAMM,IAAI,CAACZ,OAAO,CAACW,GAAG;gBACtB;YACF;YAEA,6BAA6B;YAC7B,IAAIH,MAAM,GAAG;gBACX,MAAMK,OAAOnB,MAAM,CAACc,MAAM,EAAE;gBAC5B,IAAIxB,kBAAkB6B,UAAU7B,kBAAkB0B,IAAI;oBACpD;gBACF;YACF;YAEAH,OAAOG;YACP;QACF;QAEA,OAAO;YAACJ;YAAOC;SAAK;IACtB,GAAG;QAACb;QAAQM;KAAQ;IAEpB,MAAMc,YAAYT,IAAAA,cAAO,EAAU;QACjC,OAAOF,YAAYM,MAAM,GAAG,KAAKM,QAAQrB,OAAOe,MAAM;IACxD,GAAG;QAACf,OAAOe,MAAM;QAAEN,YAAYM,MAAM;KAAC;IAEtCO,IAAAA,gBAAS,EAAC;QACR,IAAIZ,aAAa,MAAM;YACrB;QACF;QAEA,IAAIa,UAAU;QACdC,IAAAA,8BAAc,EAACd,WAAWX,UAAU0B,IAAI,CAAC,CAACC;YACxC,IAAIH,SAAS;gBACX,sEAAsE;gBACtE,uEAAuE;gBACvE,kBAAkB;gBAClBhB,WAAW,CAACoB,IAAO,CAAA;wBAAE,GAAGA,CAAC;wBAAE,CAACD,SAAST,EAAE,CAAC,EAAES;oBAAS,CAAA;YACrD;QACF;QAEA,OAAO;YACLH,UAAU;QACZ;IACF,GAAG;QAACb;QAAWX;KAAS;IAExB,MAAM,CAAC6B,cAAcC,gBAAgB,GACnCrB,IAAAA,eAAQ,EAAeP;IACzB,MAAM,CAAC6B,WAAWC,eAAe,GAAGvB,IAAAA,eAAQ,EAAS;IACrD,MAAMwB,WAAWC,IAAAA,kBAAW,EAC1B,IAAMF,eAAe,CAACG,IAAMC,KAAKC,GAAG,CAAC,GAAGF,IAAI,KAC5C,EAAE;IAEJ,MAAMrB,OAAOoB,IAAAA,kBAAW,EACtB,IACEF,eAAe,CAACG,IACdC,KAAKC,GAAG,CAAC,GAAGD,KAAKE,GAAG,CAAC5B,YAAYM,MAAM,GAAG,GAAGmB,IAAI,MAErD;QAACzB,YAAYM,MAAM;KAAC;IAGtB,MAAMV,cAAcM,IAAAA,cAAO,EACzB;YAAMF;eAAAA,CAAAA,yBAAAA,WAAW,CAACqB,UAAU,YAAtBrB,yBAA0B;OAChC;QAACqB;QAAWrB;KAAY;IAG1B,kEAAkE;IAClE,gDAAgD;IAChDa,IAAAA,gBAAS,EAAC;QACR,IAAItB,OAAOe,MAAM,GAAG,GAAG;YACrBR,WAAW,CAAC;YACZsB,gBAAgB;YAChBE,eAAe;QACjB;IACF,GAAG;QAAC/B,OAAOe,MAAM;KAAC;IAElB,MAAMuB,WAAWL,IAAAA,kBAAW,EAAC,IAAMJ,gBAAgB,cAAc,EAAE;IACnE,MAAMU,OAAON,IAAAA,kBAAW,EAAC,IAAMJ,gBAAgB,WAAW,EAAE;IAC5D,MAAMW,aAAaP,IAAAA,kBAAW,EAAC,IAAMJ,gBAAgB,eAAe,EAAE;IAEtE,2EAA2E;IAC3E,6CAA6C;IAC7C,IAAI7B,OAAOe,MAAM,GAAG,KAAKV,eAAe,MAAM;QAC5C,OAAO;IACT;IAEA,IAAIe,WAAW;QACb,6BAA6B;QAC7B,qBAAO,qBAACqB,gBAAO;IACjB;IAEA,IAAIb,iBAAiB,UAAU;QAC7B,OAAO;IACT;IAEA,IAAIA,iBAAiB,aAAa;QAChC,qBACE,qBAACc,YAAK;YACJC,mBAAiB;YACjBC,aAAW;YACXC,WAAW,AAAC,+BAA4B1C,CAAAA,qBAAqB,8BAA8B,EAAC;YAC5F2C,SAASN;sBAET,cAAA,sBAACO;gBAAIF,WAAU;;kCACb,sBAACG;wBACCC,OAAM;wBACNC,OAAM;wBACNC,QAAO;wBACPC,SAAQ;wBACRC,MAAK;wBACLC,QAAO;wBACPC,aAAY;wBACZC,eAAc;wBACdC,gBAAe;;0CAEf,qBAACC;gCAAOC,IAAG;gCAAKC,IAAG;gCAAKC,GAAE;;0CAC1B,qBAACC;gCAAKC,IAAG;gCAAKC,IAAG;gCAAIC,IAAG;gCAAKC,IAAG;;0CAChC,qBAACJ;gCAAKC,IAAG;gCAAKC,IAAG;gCAAKC,IAAG;gCAAQC,IAAG;;;;kCAEtC,sBAACC;;0CACC,qBAACA;gCAAKC,mBAAiB;0CAAE3D,YAAYM,MAAM;;4BAAQ;4BAClDN,YAAYM,MAAM,GAAG,IAAI,MAAM;;;kCAElC,qBAACsD;wBACCC,sCAAoC;wBACpCzB,WAAU;wBACVpD,MAAK;wBACLqD,SAAS,CAAC9B;4BACRA,EAAEuD,eAAe;4BACjBhC;wBACF;wBACAiC,cAAW;kCAEX,cAAA,qBAACC,oBAAS;;;;;IAKpB;IAEA,MAAMjG,QAAQ6B,YAAY7B,KAAK;IAC/B,MAAMkG,gBAAgB;QAAC;QAAU;KAAc,CAACC,QAAQ,CACtDC,IAAAA,2BAAc,EAACpG,UAAU;IAE3B,MAAMqG,mBAAmBlG,IAAAA,2CAA6B,EAACH;IACvD,MAAMsG,eAAoC,AAACtG,MAAcuG,OAAO,IAAI,CAAC;IACrE,MAAMC,QAAQF,aAAaE,KAAK,IAAI;IACpC,MAAM,CAACC,iBAAiBC,eAAeC,cAAc,GACnDL,aAAaM,OAAO,IAAI;QAAC;QAAM;QAAI;KAAG;IAExC,MAAMC,qBAAqBC,IAAAA,2CAAuB,EAACL;IACnD,MAAMxG,mBAAmBwG,kBACrBA,gBACGM,OAAO,CAAC,MAAML,eACdK,OAAO,CAAC,MAAMJ,eACdI,OAAO,CAAC,MAAM,IAAI,0BAA0B;KAC5CA,OAAO,CAAC,OAAO,IAAI,8CAA8C;KACjEA,OAAO,CAAC,cAAc,IACtBA,OAAO,CAAC,YAAY,MACvB;IAEJ,qBACE,qBAAC9C,gBAAO;kBACN,cAAA,qBAAC+C,cAAM;YACL/F,MAAK;YACLgG,mBAAgB;YAChBC,oBAAiB;YACjBC,SAASjB,gBAAgBkB,YAAYtD;sBAErC,cAAA,sBAACuD,qBAAa;;kCACZ,sBAACC,oBAAY;wBAACjD,WAAU;;0CACtB,sBAACkD,4CAAqB;gCACpB/D,UAAUF,YAAY,IAAIE,WAAW;gCACrCnB,MAAMiB,YAAYrB,YAAYM,MAAM,GAAG,IAAIF,OAAO;gCAClDmF,OAAOtB,gBAAgBkB,YAAYtD;;kDAEnC,sBAAC2D;;0DACC,qBAAC9B;0DAAMrC,YAAY;;4CAAS;4CAAI;0DAChC,qBAACqC;gDAAK+B,uCAAqC;0DACxCzF,YAAYM,MAAM;;4CAEpB;4CACAN,YAAYM,MAAM,GAAG,IAAI,KAAK;;;kDAEjC,qBAACoF,0CAAoB;wCAACjG,aAAaA;;;;0CAGrC,sBAAC6C;gCACCF,WAAU;gCACVuD,0BAAwBC,IAAAA,yCAAoB,EAAC7H;;kDAE7C,qBAAC8H;wCACCrF,IAAG;wCACH4B,WAAU;kDAET6B,gBACG,iBACAG,mBACE,kBACA;;kDAER,sBAACV;;0DACC,qBAACoC,sBAAU;gDACTC,2CAAyC;gDACzCC,aAAY;gDACZC,cAAa;gDACbC,SAASnI,MAAMqB,KAAK,IAAI;gDACxB+G,UAAU,CAACpI,MAAMqB,KAAK;;0DAGxB,qBAACgH,0CAAyB;gDACxBC,mBAAmB,EAAE1G,6BAAAA,UAAW0G,mBAAmB;;;;;;0CAIzD,qBAACC;gCACC9F,IAAG;gCACH4B,WAAU;0CAEV,cAAA,qBAACtE;oCACCC,OAAOA;oCACPC,kBAAkBA;;;4BAGrBuG,sBACC;0CACE,cAAA,qBAAC+B;oCACC9F,IAAG;oCACH4B,WAAU;8CAETmC;;iCAGH;4BACHvG,iCACC,qBAACsI;gCACC9F,IAAG;gCACH4B,WAAU;0CAEV,cAAA,qBAAC1D,4BAAa;oCAACd,MAAK;;iCAEpB;4BAEHI,oBACA4B,CAAAA,EAAAA,oCAAAA,YAAY2G,oBAAoB,qBAAhC3G,kCAAkCU,MAAM,KACvC,CAAC,CAAC+D,aAAamC,wBAAwB,AAAD,kBACtC,qBAACC,wCAAc;gCACbrE,WAAU;gCACVsE,uBAAuB9B;gCACvB2B,sBAAsB3G,YAAY2G,oBAAoB,IAAI,EAAE;gCAC5DI,cAAclC;gCACdmC,eAAelC;gCACf8B,0BAA0BnC,aAAamC,wBAAwB;iCAE/D;4BACHvC,8BACC,qBAAC3B;0CACC,cAAA,qBAACkD;8CAAM;;iCAKPL;;;kCAEN,qBAAC0B,eAAQ;wBAACC,wBAAU,qBAACxE;4BAAIyE,6BAA2B;;kCAClD,cAAA,qBAACC,kBAAU;4BAAC5E,WAAU;sCACpB,cAAA,qBAAC6E,0BAAY;gCAEXlJ,OAAO6B;+BADFA,YAAYY,EAAE,CAAC0G,QAAQ;;;;;;;AAS5C;AAEO,MAAMxJ,aAASyJ,kBAAG"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/container/Errors.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useCallback, Suspense } from 'react'\nimport {\n  ACTION_UNHANDLED_ERROR,\n  ACTION_UNHANDLED_REJECTION,\n  type UnhandledErrorAction,\n  type UnhandledRejectionAction,\n} from '../../shared'\nimport type { DebugInfo } from '../../types'\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogHeader,\n} from '../components/Dialog'\nimport { LeftRightDialogHeader } from '../components/LeftRightDialogHeader'\nimport { Overlay } from '../components/Overlay'\nimport { Toast } from '../components/Toast'\nimport { getErrorByType } from '../helpers/get-error-by-type'\nimport type { ReadyRuntimeError } from '../helpers/get-error-by-type'\nimport { noop as css } from '../helpers/noop-template'\nimport { CloseIcon } from '../icons/CloseIcon'\nimport { RuntimeError } from './RuntimeError'\nimport { VersionStalenessInfo } from '../components/VersionStalenessInfo'\nimport type { VersionInfo } from '../../../../../server/dev/parse-version-info'\nimport { getErrorSource } from '../../../../../shared/lib/error-source'\nimport { HotlinkedText } from '../components/hot-linked-text'\nimport { PseudoHtmlDiff } from './RuntimeError/component-stack-pseudo-html'\nimport {\n  type HydrationErrorState,\n  getHydrationWarningType,\n} from '../../../errors/hydration-error-info'\nimport { NodejsInspectorCopyButton } from '../components/nodejs-inspector'\nimport { CopyButton } from '../components/copy-button'\nimport {\n  getUnhandledErrorType,\n  isUnhandledConsoleOrRejection,\n} from '../../../errors/console-error'\nimport { extractNextErrorCode } from '../../../../../lib/error-telemetry-utils'\n\nexport type SupportedErrorEvent = {\n  id: number\n  event: UnhandledErrorAction | UnhandledRejectionAction\n}\nexport type ErrorsProps = {\n  isAppDir: boolean\n  errors: SupportedErrorEvent[]\n  initialDisplayState: DisplayState\n  versionInfo?: VersionInfo\n  hasStaticIndicator?: boolean\n  debugInfo?: DebugInfo\n}\n\ntype ReadyErrorEvent = ReadyRuntimeError\n\ntype DisplayState = 'minimized' | 'fullscreen' | 'hidden'\n\nfunction isNextjsLink(text: string): boolean {\n  return text.startsWith('https://nextjs.org')\n}\n\nfunction ErrorDescription({\n  error,\n  hydrationWarning,\n}: {\n  error: Error\n  hydrationWarning: string | null\n}) {\n  const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error)\n  const unhandledErrorType = isUnhandledOrReplayError\n    ? getUnhandledErrorType(error)\n    : null\n  const isConsoleErrorStringMessage = unhandledErrorType === 'string'\n  // If the error is:\n  // - hydration warning\n  // - captured console error or unhandled rejection\n  // skip displaying the error name\n  const title =\n    (isUnhandledOrReplayError && isConsoleErrorStringMessage) ||\n    hydrationWarning\n      ? ''\n      : error.name + ': '\n\n  // If it's replayed error, display the environment name\n  const environmentName =\n    'environmentName' in error ? error['environmentName'] : ''\n  const envPrefix = environmentName ? `[ ${environmentName} ] ` : ''\n  return (\n    <>\n      {envPrefix}\n      {title}\n      <HotlinkedText\n        text={hydrationWarning || error.message}\n        matcher={isNextjsLink}\n      />\n    </>\n  )\n}\n\nfunction getErrorSignature(ev: SupportedErrorEvent): string {\n  const { event } = ev\n  switch (event.type) {\n    case ACTION_UNHANDLED_ERROR:\n    case ACTION_UNHANDLED_REJECTION: {\n      return `${event.reason.name}::${event.reason.message}::${event.reason.stack}`\n    }\n    default: {\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const _: never = event\n  return ''\n}\n\nexport function Errors({\n  isAppDir,\n  errors,\n  initialDisplayState,\n  versionInfo,\n  hasStaticIndicator,\n  debugInfo,\n}: ErrorsProps) {\n  const [lookups, setLookups] = useState(\n    {} as { [eventId: string]: ReadyErrorEvent }\n  )\n\n  const [readyErrors, nextError] = useMemo<\n    [ReadyErrorEvent[], SupportedErrorEvent | null]\n  >(() => {\n    let ready: ReadyErrorEvent[] = []\n    let next: SupportedErrorEvent | null = null\n\n    // Ensure errors are displayed in the order they occurred in:\n    for (let idx = 0; idx < errors.length; ++idx) {\n      const e = errors[idx]\n      const { id } = e\n      if (id in lookups) {\n        ready.push(lookups[id])\n        continue\n      }\n\n      // Check for duplicate errors\n      if (idx > 0) {\n        const prev = errors[idx - 1]\n        if (getErrorSignature(prev) === getErrorSignature(e)) {\n          continue\n        }\n      }\n\n      next = e\n      break\n    }\n\n    return [ready, next]\n  }, [errors, lookups])\n\n  const isLoading = useMemo<boolean>(() => {\n    return readyErrors.length < 1 && Boolean(errors.length)\n  }, [errors.length, readyErrors.length])\n\n  useEffect(() => {\n    if (nextError == null) {\n      return\n    }\n\n    let mounted = true\n    getErrorByType(nextError, isAppDir).then((resolved) => {\n      if (mounted) {\n        // We don't care if the desired error changed while we were resolving,\n        // thus we're not tracking it using a ref. Once the work has been done,\n        // we'll store it.\n        setLookups((m) => ({ ...m, [resolved.id]: resolved }))\n      }\n    })\n\n    return () => {\n      mounted = false\n    }\n  }, [nextError, isAppDir])\n\n  const [displayState, setDisplayState] =\n    useState<DisplayState>(initialDisplayState)\n  const [activeIdx, setActiveIndex] = useState<number>(0)\n  const previous = useCallback(\n    () => setActiveIndex((v) => Math.max(0, v - 1)),\n    []\n  )\n  const next = useCallback(\n    () =>\n      setActiveIndex((v) =>\n        Math.max(0, Math.min(readyErrors.length - 1, v + 1))\n      ),\n    [readyErrors.length]\n  )\n\n  const activeError = useMemo<ReadyErrorEvent | null>(\n    () => readyErrors[activeIdx] ?? null,\n    [activeIdx, readyErrors]\n  )\n\n  // Reset component state when there are no errors to be displayed.\n  // This should never happen, but lets handle it.\n  useEffect(() => {\n    if (errors.length < 1) {\n      setLookups({})\n      setDisplayState('hidden')\n      setActiveIndex(0)\n    }\n  }, [errors.length])\n\n  const minimize = useCallback(() => setDisplayState('minimized'), [])\n  const hide = useCallback(() => setDisplayState('hidden'), [])\n  const fullscreen = useCallback(() => setDisplayState('fullscreen'), [])\n\n  // This component shouldn't be rendered with no errors, but if it is, let's\n  // handle it gracefully by rendering nothing.\n  if (errors.length < 1 || activeError == null) {\n    return null\n  }\n\n  if (isLoading) {\n    // TODO: better loading state\n    return <Overlay />\n  }\n\n  if (displayState === 'hidden') {\n    return null\n  }\n\n  if (displayState === 'minimized') {\n    return (\n      <Toast\n        data-nextjs-toast\n        data-issues\n        className={`nextjs-toast-errors-parent${hasStaticIndicator ? ' nextjs-error-with-static' : ''}`}\n        onClick={fullscreen}\n      >\n        <div className=\"nextjs-toast-errors\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            width=\"24\"\n            height=\"24\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n            <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"></line>\n            <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"></line>\n          </svg>\n          <span>\n            <span data-issues-count>{readyErrors.length}</span> issue\n            {readyErrors.length > 1 ? 's' : ''}\n          </span>\n          <button\n            data-nextjs-toast-errors-hide-button\n            className=\"nextjs-toast-hide-button\"\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              hide()\n            }}\n            aria-label=\"Hide Issues\"\n          >\n            <CloseIcon />\n          </button>\n        </div>\n      </Toast>\n    )\n  }\n\n  const error = activeError.error\n  const isServerError = ['server', 'edge-server'].includes(\n    getErrorSource(error) || ''\n  )\n  const isUnhandledError = isUnhandledConsoleOrRejection(error)\n  const errorDetails: HydrationErrorState = (error as any).details || {}\n  const notes = errorDetails.notes || ''\n  const [warningTemplate, serverContent, clientContent] =\n    errorDetails.warning || [null, '', '']\n\n  const hydrationErrorType = getHydrationWarningType(warningTemplate)\n  const hydrationWarning = warningTemplate\n    ? warningTemplate\n        .replace('%s', serverContent)\n        .replace('%s', clientContent)\n        .replace('%s', '') // remove the %s for stack\n        .replace(/%s$/, '') // If there's still a %s at the end, remove it\n        .replace(/^Warning: /, '')\n        .replace(/^Error: /, '')\n    : null\n\n  return (\n    <Overlay>\n      <Dialog\n        type=\"error\"\n        aria-labelledby=\"nextjs__container_errors_label\"\n        aria-describedby=\"nextjs__container_errors_desc\"\n        onClose={isServerError ? undefined : minimize}\n      >\n        <DialogContent>\n          <DialogHeader className=\"nextjs-container-errors-header\">\n            <LeftRightDialogHeader\n              previous={activeIdx > 0 ? previous : null}\n              next={activeIdx < readyErrors.length - 1 ? next : null}\n              close={isServerError ? undefined : minimize}\n            >\n              <small>\n                <span>{activeIdx + 1}</span> of{' '}\n                <span data-nextjs-dialog-header-total-count>\n                  {readyErrors.length}\n                </span>\n                {' issue'}\n                {readyErrors.length < 2 ? '' : 's'}\n              </small>\n              <VersionStalenessInfo versionInfo={versionInfo} />\n            </LeftRightDialogHeader>\n\n            <div\n              className=\"nextjs__container_errors__error_title\"\n              data-nextjs-error-code={extractNextErrorCode(error)} // allow assertion in tests before error rating is implemented\n            >\n              <h1\n                id=\"nextjs__container_errors_label\"\n                className=\"nextjs__container_errors_label\"\n              >\n                {isServerError\n                  ? 'Server Error'\n                  : isUnhandledError\n                    ? 'Console Error'\n                    : 'Unhandled Runtime Error'}\n              </h1>\n              <span>\n                <CopyButton\n                  data-nextjs-data-runtime-error-copy-stack\n                  actionLabel=\"Copy error stack\"\n                  successLabel=\"Copied\"\n                  content={error.stack || ''}\n                  disabled={!error.stack}\n                />\n\n                <NodejsInspectorCopyButton\n                  devtoolsFrontendUrl={debugInfo?.devtoolsFrontendUrl}\n                />\n              </span>\n            </div>\n            <p\n              id=\"nextjs__container_errors_desc\"\n              className=\"nextjs__container_errors_desc\"\n            >\n              <ErrorDescription\n                error={error}\n                hydrationWarning={hydrationWarning}\n              />\n            </p>\n            {notes ? (\n              <>\n                <p\n                  id=\"nextjs__container_errors__notes\"\n                  className=\"nextjs__container_errors__notes\"\n                >\n                  {notes}\n                </p>\n              </>\n            ) : null}\n            {hydrationWarning ? (\n              <p\n                id=\"nextjs__container_errors__link\"\n                className=\"nextjs__container_errors__link\"\n              >\n                <HotlinkedText text=\"See more info here: https://nextjs.org/docs/messages/react-hydration-error\" />\n              </p>\n            ) : null}\n\n            {hydrationWarning &&\n            (activeError.componentStackFrames?.length ||\n              !!errorDetails.reactOutputComponentDiff) ? (\n              <PseudoHtmlDiff\n                className=\"nextjs__container_errors__component-stack\"\n                hydrationMismatchType={hydrationErrorType}\n                firstContent={serverContent}\n                secondContent={clientContent}\n                reactOutputComponentDiff={\n                  errorDetails.reactOutputComponentDiff || ''\n                }\n              />\n            ) : null}\n            {isServerError ? (\n              <div>\n                <small>\n                  This error happened while generating the page. Any console\n                  logs will be displayed in the terminal window.\n                </small>\n              </div>\n            ) : undefined}\n          </DialogHeader>\n          <Suspense fallback={<div data-nextjs-error-suspended />}>\n            <DialogBody className=\"nextjs-container-errors-body\">\n              <RuntimeError\n                key={activeError.id.toString()}\n                error={activeError}\n              />\n            </DialogBody>\n          </Suspense>\n        </DialogContent>\n      </Dialog>\n    </Overlay>\n  )\n}\n\nexport const styles = css`\n  .nextjs-error-with-static {\n    bottom: calc(var(--size-gap-double) * 4.5);\n  }\n  .nextjs-container-errors-header {\n    position: relative;\n  }\n  .nextjs-container-errors-header > h1 {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: calc(var(--size-gap-double) * 1.5) 0;\n    color: var(--color-title-h1);\n  }\n  .nextjs-container-errors-header small {\n    font-size: var(--size-font-small);\n    color: var(--color-accents-1);\n    margin-left: var(--size-gap-double);\n  }\n  .nextjs-container-errors-header small > span {\n    font-family: var(--font-stack-monospace);\n  }\n  .nextjs-container-errors-header p {\n    font-size: var(--size-font-small);\n    line-height: var(--size-font-big);\n    white-space: pre-wrap;\n  }\n  .nextjs__container_errors_desc {\n    font-family: var(--font-stack-monospace);\n    padding: var(--size-gap) var(--size-gap-double);\n    border-left: 2px solid var(--color-text-color-red-1);\n    margin-top: var(--size-gap);\n    font-weight: bold;\n    color: var(--color-text-color-red-1);\n    background-color: var(--color-text-background-red-1);\n  }\n  p.nextjs__container_errors__link {\n    margin: var(--size-gap-double) auto;\n    color: var(--color-text-color-red-1);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  p.nextjs__container_errors__notes {\n    margin: var(--size-gap-double) auto;\n    color: var(--color-stack-notes);\n    font-weight: 600;\n    font-size: 15px;\n  }\n  .nextjs-container-errors-header > div > small {\n    margin: 0;\n    margin-top: var(--size-gap-half);\n  }\n  .nextjs-container-errors-header > p > a {\n    color: inherit;\n    font-weight: bold;\n  }\n  .nextjs-container-errors-body > h2:not(:first-child) {\n    margin-top: calc(var(--size-gap-double) + var(--size-gap));\n  }\n  .nextjs-container-errors-body > h2 {\n    color: var(--color-title-color);\n    margin-bottom: var(--size-gap);\n    font-size: var(--size-font-big);\n  }\n  .nextjs__container_errors__component-stack {\n    padding: 12px 32px;\n    color: var(--color-ansi-fg);\n    background: var(--color-ansi-bg);\n  }\n  .nextjs-toast-errors-parent {\n    cursor: pointer;\n    transition: transform 0.2s ease;\n  }\n  .nextjs-toast-errors-parent:hover {\n    transform: scale(1.1);\n  }\n  .nextjs-toast-errors {\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n  .nextjs-toast-errors > svg {\n    margin-right: var(--size-gap);\n  }\n  .nextjs-toast-hide-button {\n    margin-left: var(--size-gap-triple);\n    border: none;\n    background: none;\n    color: var(--color-ansi-bright-white);\n    padding: 0;\n    transition: opacity 0.25s ease;\n    opacity: 0.7;\n  }\n  .nextjs-toast-hide-button:hover {\n    opacity: 1;\n  }\n  .nextjs-container-errors-header\n    > .nextjs-container-build-error-version-status {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n  .nextjs__container_errors_inspect_copy_button {\n    cursor: pointer;\n    background: none;\n    border: none;\n    color: var(--color-ansi-bright-white);\n    font-size: 1.5rem;\n    padding: 0;\n    margin: 0;\n    margin-left: var(--size-gap);\n    transition: opacity 0.25s ease;\n  }\n  .nextjs__container_errors__error_title {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .nextjs-data-runtime-error-inspect-link,\n  .nextjs-data-runtime-error-inspect-link:hover {\n    margin: 0 8px;\n    color: inherit;\n  }\n`\n"],"names":["Errors","styles","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","isUnhandledConsoleOrRejection","unhandledErrorType","getUnhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","HotlinkedText","message","matcher","getErrorSignature","ev","event","type","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","reason","stack","_","isAppDir","errors","initialDisplayState","versionInfo","hasStaticIndicator","debugInfo","activeError","lookups","setLookups","useState","readyErrors","nextError","useMemo","ready","next","idx","length","e","id","push","prev","isLoading","Boolean","useEffect","mounted","getErrorByType","then","resolved","m","displayState","setDisplayState","activeIdx","setActiveIndex","previous","useCallback","v","Math","max","min","minimize","hide","fullscreen","Overlay","Toast","data-nextjs-toast","data-issues","className","onClick","div","svg","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","circle","cx","cy","r","line","x1","y1","x2","y2","span","data-issues-count","button","data-nextjs-toast-errors-hide-button","stopPropagation","aria-label","CloseIcon","isServerError","includes","getErrorSource","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","getHydrationWarningType","replace","Dialog","aria-labelledby","aria-describedby","onClose","undefined","DialogContent","DialogHeader","LeftRightDialogHeader","close","small","data-nextjs-dialog-header-total-count","VersionStalenessInfo","data-nextjs-error-code","extractNextErrorCode","h1","CopyButton","data-nextjs-data-runtime-error-copy-stack","actionLabel","successLabel","content","disabled","NodejsInspectorCopyButton","devtoolsFrontendUrl","p","componentStackFrames","reactOutputComponentDiff","PseudoHtmlDiff","hydrationMismatchType","firstContent","secondContent","Suspense","fallback","data-nextjs-error-suspended","DialogBody","RuntimeError","toString","css"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.d.ts

@@ -1,56 +1,2 @@
-import type { ComponentStackFrame } from '../../helpers/parse-component-stack';
-/**
- *
- * Format component stack into pseudo HTML
- * component stack is an array of strings, e.g.: ['p', 'p', 'Page', ...]
- *
- * For html tags mismatch, it will render it for the code block
- *
- * ```
- * <pre>
- *  <code>{`
- *    <Page>
- *       <p red>
- *         <p red>
- *  `}</code>
- * </pre>
- * ```
- *
- * For text mismatch, it will render it for the code block
- *
- * ```
- * <pre>
- * <code>{`
- *   <Page>
- *     <p>
- *       "Server Text" (green)
- *       "Client Text" (red)
- *     </p>
- *   </Page>
- * `}</code>
- * ```
- *
- * For bad text under a tag it will render it for the code block,
- * e.g. "Mismatched Text" under <p>
- *
- * ```
- * <pre>
- * <code>{`
- *   <Page>
- *     <div>
- *       <p>
- *         "Mismatched Text" (red)
- *      </p>
- *     </div>
- *   </Page>
- * `}</code>
- * ```
- *
- */
-export declare function PseudoHtmlDiff({ componentStackFrames, firstContent, secondContent, hydrationMismatchType, reactOutputComponentDiff, ...props }: {
-    componentStackFrames: ComponentStackFrame[];
-    firstContent: string;
-    secondContent: string;
-    reactOutputComponentDiff: string | undefined;
-    hydrationMismatchType: 'tag' | 'text' | 'text-in-tag';
-} & React.HTMLAttributes<HTMLPreElement>): import("react/jsx-runtime").JSX.Element;
+export { PseudoHtmlDiff } from '../../../hydration-diff/diff-view';
+export declare const styles: string;

package/dist/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.js

@@ -2,237 +2,38 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "PseudoHtmlDiff", {
-    enumerable: true,
-    get: function() {
-        return PseudoHtmlDiff;
-    }
+0 && (module.exports = {
+    PseudoHtmlDiff: null,
+    styles: null
 });
-const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _CollapseIcon = require("../../icons/CollapseIcon");
-function getAdjacentProps(isAdj) {
-    return {
-        'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj
-    };
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
 }
-function PseudoHtmlDiff(param) {
-    let { componentStackFrames, firstContent, secondContent, hydrationMismatchType, reactOutputComponentDiff, ...props } = param;
-    const isHtmlTagsWarning = hydrationMismatchType === 'tag';
-    const isReactHydrationDiff = !!reactOutputComponentDiff;
-    // For text mismatch, mismatched text will take 2 rows, so we display 4 rows of component stack
-    const MAX_NON_COLLAPSED_FRAMES = isHtmlTagsWarning ? 6 : 4;
-    const [isHtmlCollapsed, toggleCollapseHtml] = (0, _react.useState)(true);
-    const htmlComponents = (0, _react.useMemo)(()=>{
-        const componentStacks = [];
-        // React 19 unified mismatch
-        if (isReactHydrationDiff) {
-            let currentComponentIndex = componentStackFrames.length - 1;
-            const reactComponentDiffLines = reactOutputComponentDiff.split('\n');
-            const diffHtmlStack = [];
-            reactComponentDiffLines.forEach((line, index)=>{
-                let trimmedLine = line.trim();
-                const isDiffLine = trimmedLine[0] === '+' || trimmedLine[0] === '-';
-                const spaces = ' '.repeat(Math.max(componentStacks.length * 2, 1));
-                if (isDiffLine) {
-                    const sign = trimmedLine[0];
-                    trimmedLine = trimmedLine.slice(1).trim() // trim spaces after sign
-                    ;
-                    diffHtmlStack.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                        "data-nextjs-container-errors-pseudo-html--diff": sign === '+' ? 'add' : 'remove',
-                        children: [
-                            sign,
-                            spaces,
-                            trimmedLine,
-                            '\n'
-                        ]
-                    }, 'comp-diff' + index));
-                } else if (currentComponentIndex >= 0) {
-                    const isUserLandComponent = trimmedLine.startsWith('<' + componentStackFrames[currentComponentIndex].component);
-                    // If it's matched userland component or it's ... we will keep the component stack in diff
-                    if (isUserLandComponent || trimmedLine === '...') {
-                        currentComponentIndex--;
-                        componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                            children: [
-                                spaces,
-                                trimmedLine,
-                                '\n'
-                            ]
-                        }, 'comp-diff' + index));
-                    } else if (!isHtmlCollapsed) {
-                        componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                            children: [
-                                spaces,
-                                trimmedLine,
-                                '\n'
-                            ]
-                        }, 'comp-diff' + index));
-                    }
-                } else if (!isHtmlCollapsed) {
-                    // In general, if it's not collapsed, show the whole diff
-                    componentStacks.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                        children: [
-                            spaces,
-                            trimmedLine,
-                            '\n'
-                        ]
-                    }, 'comp-diff' + index));
-                }
-            });
-            return componentStacks.concat(diffHtmlStack);
-        }
-        const nestedHtmlStack = [];
-        const tagNames = isHtmlTagsWarning ? [
-            firstContent.replace(/<|>/g, ''),
-            secondContent.replace(/<|>/g, '')
-        ] : [];
-        let lastText = '';
-        const componentStack = componentStackFrames.map((frame)=>frame.component).reverse();
-        // [child index, parent index]
-        const matchedIndex = [
-            -1,
-            -1
-        ];
-        if (isHtmlTagsWarning) {
-            // Reverse search for the child tag
-            for(let i = componentStack.length - 1; i >= 0; i--){
-                if (componentStack[i] === tagNames[0]) {
-                    matchedIndex[0] = i;
-                    break;
-                }
-            }
-            // Start searching parent tag from child tag above
-            for(let i = matchedIndex[0] - 1; i >= 0; i--){
-                if (componentStack[i] === tagNames[1]) {
-                    matchedIndex[1] = i;
-                    break;
-                }
-            }
-        }
-        componentStack.forEach((component, index, componentList)=>{
-            const spaces = ' '.repeat(nestedHtmlStack.length * 2);
-            // When component is the server or client tag name, highlight it
-            const isHighlightedTag = isHtmlTagsWarning ? index === matchedIndex[0] || index === matchedIndex[1] : tagNames.includes(component);
-            const isAdjacentTag = isHighlightedTag || Math.abs(index - matchedIndex[0]) <= 1 || Math.abs(index - matchedIndex[1]) <= 1;
-            const isLastFewFrames = !isHtmlTagsWarning && index >= componentList.length - 6;
-            const adjProps = getAdjacentProps(isAdjacentTag);
-            if (isHtmlTagsWarning && isAdjacentTag || isLastFewFrames) {
-                const codeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
-                    children: [
-                        spaces,
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            ...adjProps,
-                            ...isHighlightedTag ? {
-                                'data-nextjs-container-errors-pseudo-html--tag-error': true
-                            } : undefined,
-                            children: "<" + component + ">\n"
-                        })
-                    ]
-                });
-                lastText = component;
-                const wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                    children: [
-                        codeLine,
-                        isHighlightedTag && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html--hint": true,
-                            children: spaces + '^'.repeat(component.length + 2) + '\n'
-                        })
-                    ]
-                }, nestedHtmlStack.length);
-                nestedHtmlStack.push(wrappedCodeLine);
-            } else {
-                if (nestedHtmlStack.length >= MAX_NON_COLLAPSED_FRAMES && isHtmlCollapsed) {
-                    return;
-                }
-                if (!isHtmlCollapsed || isLastFewFrames) {
-                    nestedHtmlStack.push(/*#__PURE__*/ (0, _react.createElement)("span", {
-                        ...adjProps,
-                        key: nestedHtmlStack.length,
-                        children: [
-                            spaces,
-                            '<' + component + '>\n'
-                        ]
-                    }));
-                } else if (isHtmlCollapsed && lastText !== '...') {
-                    lastText = '...';
-                    nestedHtmlStack.push(/*#__PURE__*/ (0, _react.createElement)("span", {
-                        ...adjProps,
-                        key: nestedHtmlStack.length,
-                        children: [
-                            spaces,
-                            '...\n'
-                        ]
-                    }));
-                }
-            }
-        });
-        // Hydration mismatch: text or text-tag
-        if (!isHtmlTagsWarning) {
-            const spaces = ' '.repeat(nestedHtmlStack.length * 2);
-            let wrappedCodeLine;
-            if (hydrationMismatchType === 'text') {
-                // hydration type is "text", represent [server content, client content]
-                wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html--diff": "remove",
-                            children: spaces + ('"' + firstContent + '"\n')
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html--diff": "add",
-                            children: spaces + ('"' + secondContent + '"\n')
-                        })
-                    ]
-                }, nestedHtmlStack.length);
-            } else if (hydrationMismatchType === 'text-in-tag') {
-                // hydration type is "text-in-tag", represent [parent tag, mismatch content]
-                wrappedCodeLine = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                    children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html--tag-adjacent": true,
-                            children: spaces + ("<" + secondContent + ">\n")
-                        }),
-                        /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
-                            "data-nextjs-container-errors-pseudo-html--diff": "remove",
-                            children: spaces + ('  "' + firstContent + '"\n')
-                        })
-                    ]
-                }, nestedHtmlStack.length);
-            }
-            nestedHtmlStack.push(wrappedCodeLine);
-        }
-        return nestedHtmlStack;
-    }, [
-        componentStackFrames,
-        isHtmlCollapsed,
-        firstContent,
-        secondContent,
-        isHtmlTagsWarning,
-        hydrationMismatchType,
-        MAX_NON_COLLAPSED_FRAMES,
-        isReactHydrationDiff,
-        reactOutputComponentDiff
+_export(exports, {
+    PseudoHtmlDiff: function() {
+        return _diffview.PseudoHtmlDiff;
+    },
+    styles: function() {
+        return styles;
+    }
+});
+const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
+const _nooptemplate = require("../../helpers/noop-template");
+const _diffview = require("../../../hydration-diff/diff-view");
+function _templateObject() {
+    const data = _tagged_template_literal_loose._([
+        "\n  [data-nextjs-container-errors-pseudo-html] {\n    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    color: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    font-size: var(--size-font-small);\n    line-height: calc(5 / 3);\n    white-space: pre;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    color: var(--color-ansi-green);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    color: var(--color-ansi-red);\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    color: var(--color-ansi-yellow);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-error] {\n    color: var(--color-ansi-red);\n    font-weight: bold;\n  }\n  ",
+        "\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    scroll-snap-align: center;\n  }\n"
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
-        "data-nextjs-container-errors-pseudo-html": true,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
-                tabIndex: 10,
-                "data-nextjs-container-errors-pseudo-html-collapse": true,
-                onClick: ()=>toggleCollapseHtml(!isHtmlCollapsed),
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollapseIcon.CollapseIcon, {
-                    collapsed: isHtmlCollapsed
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)("pre", {
-                ...props,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("code", {
-                    children: htmlComponents
-                })
-            })
-        ]
-    });
+    _templateObject = function() {
+        return data;
+    };
+    return data;
 }
+const styles = (0, _nooptemplate.noop)(_templateObject(), '');
 
 if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
   Object.defineProperty(exports.default, '__esModule', { value: true });

package/dist/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx"],"sourcesContent":["import { useMemo, Fragment, useState } from 'react'\nimport type { ComponentStackFrame } from '../../helpers/parse-component-stack'\nimport { CollapseIcon } from '../../icons/CollapseIcon'\n\nfunction getAdjacentProps(isAdj: boolean) {\n  return { 'data-nextjs-container-errors-pseudo-html--tag-adjacent': isAdj }\n}\n\n/**\n *\n * Format component stack into pseudo HTML\n * component stack is an array of strings, e.g.: ['p', 'p', 'Page', ...]\n *\n * For html tags mismatch, it will render it for the code block\n *\n * ```\n * <pre>\n *  <code>{`\n *    <Page>\n *       <p red>\n *         <p red>\n *  `}</code>\n * </pre>\n * ```\n *\n * For text mismatch, it will render it for the code block\n *\n * ```\n * <pre>\n * <code>{`\n *   <Page>\n *     <p>\n *       \"Server Text\" (green)\n *       \"Client Text\" (red)\n *     </p>\n *   </Page>\n * `}</code>\n * ```\n *\n * For bad text under a tag it will render it for the code block,\n * e.g. \"Mismatched Text\" under <p>\n *\n * ```\n * <pre>\n * <code>{`\n *   <Page>\n *     <div>\n *       <p>\n *         \"Mismatched Text\" (red)\n *      </p>\n *     </div>\n *   </Page>\n * `}</code>\n * ```\n *\n */\nexport function PseudoHtmlDiff({\n  componentStackFrames,\n  firstContent,\n  secondContent,\n  hydrationMismatchType,\n  reactOutputComponentDiff,\n  ...props\n}: {\n  componentStackFrames: ComponentStackFrame[]\n  firstContent: string\n  secondContent: string\n  reactOutputComponentDiff: string | undefined\n  hydrationMismatchType: 'tag' | 'text' | 'text-in-tag'\n} & React.HTMLAttributes<HTMLPreElement>) {\n  const isHtmlTagsWarning = hydrationMismatchType === 'tag'\n  const isReactHydrationDiff = !!reactOutputComponentDiff\n\n  // For text mismatch, mismatched text will take 2 rows, so we display 4 rows of component stack\n  const MAX_NON_COLLAPSED_FRAMES = isHtmlTagsWarning ? 6 : 4\n  const [isHtmlCollapsed, toggleCollapseHtml] = useState(true)\n\n  const htmlComponents = useMemo(() => {\n    const componentStacks: React.ReactNode[] = []\n    // React 19 unified mismatch\n    if (isReactHydrationDiff) {\n      let currentComponentIndex = componentStackFrames.length - 1\n      const reactComponentDiffLines = reactOutputComponentDiff.split('\\n')\n      const diffHtmlStack: React.ReactNode[] = []\n      reactComponentDiffLines.forEach((line, index) => {\n        let trimmedLine = line.trim()\n        const isDiffLine = trimmedLine[0] === '+' || trimmedLine[0] === '-'\n        const spaces = ' '.repeat(Math.max(componentStacks.length * 2, 1))\n\n        if (isDiffLine) {\n          const sign = trimmedLine[0]\n          trimmedLine = trimmedLine.slice(1).trim() // trim spaces after sign\n          diffHtmlStack.push(\n            <span\n              key={'comp-diff' + index}\n              data-nextjs-container-errors-pseudo-html--diff={\n                sign === '+' ? 'add' : 'remove'\n              }\n            >\n              {sign}\n              {spaces}\n              {trimmedLine}\n              {'\\n'}\n            </span>\n          )\n        } else if (currentComponentIndex >= 0) {\n          const isUserLandComponent = trimmedLine.startsWith(\n            '<' + componentStackFrames[currentComponentIndex].component\n          )\n          // If it's matched userland component or it's ... we will keep the component stack in diff\n          if (isUserLandComponent || trimmedLine === '...') {\n            currentComponentIndex--\n            componentStacks.push(\n              <span key={'comp-diff' + index}>\n                {spaces}\n                {trimmedLine}\n                {'\\n'}\n              </span>\n            )\n          } else if (!isHtmlCollapsed) {\n            componentStacks.push(\n              <span key={'comp-diff' + index}>\n                {spaces}\n                {trimmedLine}\n                {'\\n'}\n              </span>\n            )\n          }\n        } else if (!isHtmlCollapsed) {\n          // In general, if it's not collapsed, show the whole diff\n          componentStacks.push(\n            <span key={'comp-diff' + index}>\n              {spaces}\n              {trimmedLine}\n              {'\\n'}\n            </span>\n          )\n        }\n      })\n      return componentStacks.concat(diffHtmlStack)\n    }\n\n    const nestedHtmlStack: React.ReactNode[] = []\n    const tagNames = isHtmlTagsWarning\n      ? // tags could have < or > in the name, so we always remove them to match\n        [firstContent.replace(/<|>/g, ''), secondContent.replace(/<|>/g, '')]\n      : []\n\n    let lastText = ''\n\n    const componentStack = componentStackFrames\n      .map((frame) => frame.component)\n      .reverse()\n\n    // [child index, parent index]\n    const matchedIndex = [-1, -1]\n    if (isHtmlTagsWarning) {\n      // Reverse search for the child tag\n      for (let i = componentStack.length - 1; i >= 0; i--) {\n        if (componentStack[i] === tagNames[0]) {\n          matchedIndex[0] = i\n          break\n        }\n      }\n      // Start searching parent tag from child tag above\n      for (let i = matchedIndex[0] - 1; i >= 0; i--) {\n        if (componentStack[i] === tagNames[1]) {\n          matchedIndex[1] = i\n          break\n        }\n      }\n    }\n\n    componentStack.forEach((component, index, componentList) => {\n      const spaces = ' '.repeat(nestedHtmlStack.length * 2)\n\n      // When component is the server or client tag name, highlight it\n      const isHighlightedTag = isHtmlTagsWarning\n        ? index === matchedIndex[0] || index === matchedIndex[1]\n        : tagNames.includes(component)\n      const isAdjacentTag =\n        isHighlightedTag ||\n        Math.abs(index - matchedIndex[0]) <= 1 ||\n        Math.abs(index - matchedIndex[1]) <= 1\n\n      const isLastFewFrames =\n        !isHtmlTagsWarning && index >= componentList.length - 6\n\n      const adjProps = getAdjacentProps(isAdjacentTag)\n\n      if ((isHtmlTagsWarning && isAdjacentTag) || isLastFewFrames) {\n        const codeLine = (\n          <span>\n            {spaces}\n            <span\n              {...adjProps}\n              {...{\n                ...(isHighlightedTag\n                  ? {\n                      'data-nextjs-container-errors-pseudo-html--tag-error':\n                        true,\n                    }\n                  : undefined),\n              }}\n            >\n              {`<${component}>\\n`}\n            </span>\n          </span>\n        )\n        lastText = component\n\n        const wrappedCodeLine = (\n          <Fragment key={nestedHtmlStack.length}>\n            {codeLine}\n            {/* Add ^^^^ to the target tags used for snapshots but not displayed for users */}\n            {isHighlightedTag && (\n              <span data-nextjs-container-errors-pseudo-html--hint>\n                {spaces + '^'.repeat(component.length + 2) + '\\n'}\n              </span>\n            )}\n          </Fragment>\n        )\n        nestedHtmlStack.push(wrappedCodeLine)\n      } else {\n        if (\n          nestedHtmlStack.length >= MAX_NON_COLLAPSED_FRAMES &&\n          isHtmlCollapsed\n        ) {\n          return\n        }\n\n        if (!isHtmlCollapsed || isLastFewFrames) {\n          nestedHtmlStack.push(\n            <span {...adjProps} key={nestedHtmlStack.length}>\n              {spaces}\n              {'<' + component + '>\\n'}\n            </span>\n          )\n        } else if (isHtmlCollapsed && lastText !== '...') {\n          lastText = '...'\n          nestedHtmlStack.push(\n            <span {...adjProps} key={nestedHtmlStack.length}>\n              {spaces}\n              {'...\\n'}\n            </span>\n          )\n        }\n      }\n    })\n    // Hydration mismatch: text or text-tag\n    if (!isHtmlTagsWarning) {\n      const spaces = ' '.repeat(nestedHtmlStack.length * 2)\n      let wrappedCodeLine\n      if (hydrationMismatchType === 'text') {\n        // hydration type is \"text\", represent [server content, client content]\n        wrappedCodeLine = (\n          <Fragment key={nestedHtmlStack.length}>\n            <span data-nextjs-container-errors-pseudo-html--diff=\"remove\">\n              {spaces + `\"${firstContent}\"\\n`}\n            </span>\n            <span data-nextjs-container-errors-pseudo-html--diff=\"add\">\n              {spaces + `\"${secondContent}\"\\n`}\n            </span>\n          </Fragment>\n        )\n      } else if (hydrationMismatchType === 'text-in-tag') {\n        // hydration type is \"text-in-tag\", represent [parent tag, mismatch content]\n        wrappedCodeLine = (\n          <Fragment key={nestedHtmlStack.length}>\n            <span data-nextjs-container-errors-pseudo-html--tag-adjacent>\n              {spaces + `<${secondContent}>\\n`}\n            </span>\n            <span data-nextjs-container-errors-pseudo-html--diff=\"remove\">\n              {spaces + `  \"${firstContent}\"\\n`}\n            </span>\n          </Fragment>\n        )\n      }\n      nestedHtmlStack.push(wrappedCodeLine)\n    }\n\n    return nestedHtmlStack\n  }, [\n    componentStackFrames,\n    isHtmlCollapsed,\n    firstContent,\n    secondContent,\n    isHtmlTagsWarning,\n    hydrationMismatchType,\n    MAX_NON_COLLAPSED_FRAMES,\n    isReactHydrationDiff,\n    reactOutputComponentDiff,\n  ])\n\n  return (\n    <div data-nextjs-container-errors-pseudo-html>\n      <button\n        tabIndex={10} // match CallStackFrame\n        data-nextjs-container-errors-pseudo-html-collapse\n        onClick={() => toggleCollapseHtml(!isHtmlCollapsed)}\n      >\n        <CollapseIcon collapsed={isHtmlCollapsed} />\n      </button>\n      <pre {...props}>\n        <code>{htmlComponents}</code>\n      </pre>\n    </div>\n  )\n}\n"],"names":["PseudoHtmlDiff","getAdjacentProps","isAdj","componentStackFrames","firstContent","secondContent","hydrationMismatchType","reactOutputComponentDiff","props","isHtmlTagsWarning","isReactHydrationDiff","MAX_NON_COLLAPSED_FRAMES","isHtmlCollapsed","toggleCollapseHtml","useState","htmlComponents","useMemo","componentStacks","currentComponentIndex","length","reactComponentDiffLines","split","diffHtmlStack","forEach","line","index","trimmedLine","trim","isDiffLine","spaces","repeat","Math","max","sign","slice","push","span","data-nextjs-container-errors-pseudo-html--diff","isUserLandComponent","startsWith","component","concat","nestedHtmlStack","tagNames","replace","lastText","componentStack","map","frame","reverse","matchedIndex","i","componentList","isHighlightedTag","includes","isAdjacentTag","abs","isLastFewFrames","adjProps","codeLine","undefined","wrappedCodeLine","Fragment","data-nextjs-container-errors-pseudo-html--hint","key","data-nextjs-container-errors-pseudo-html--tag-adjacent","div","data-nextjs-container-errors-pseudo-html","button","tabIndex","data-nextjs-container-errors-pseudo-html-collapse","onClick","CollapseIcon","collapsed","pre","code"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/internal/container/RuntimeError/component-stack-pseudo-html.tsx"],"sourcesContent":["import { noop as css } from '../../helpers/noop-template'\n\nexport { PseudoHtmlDiff } from '../../../hydration-diff/diff-view'\n\nexport const styles = css`\n  [data-nextjs-container-errors-pseudo-html] {\n    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse-button] {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    color: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-line] {\n    display: inline-block;\n    width: 100%;\n    padding-left: var(--size-10);\n    font-size: var(--size-font-small);\n    line-height: calc(5 / 3);\n    white-space: pre;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    color: var(--color-ansi-green);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    color: var(--color-ansi-red);\n  }\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    color: var(--color-ansi-yellow);\n    font-weight: bold;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-error] {\n    color: var(--color-ansi-red);\n    font-weight: bold;\n  }\n  ${/* hide but text are still accessible in DOM */ ''}\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse='true']\n    .nextjs__container_errors__component-stack\n    code {\n    max-height: 100px;\n    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, black 50%);\n  }\n  .nextjs__container_errors__component-stack code {\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;\n    scroll-snap-type: y mandatory;\n    overflow-y: hidden;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff],\n  [data-nextjs-container-errors-pseudo-html-line--error] {\n    scroll-snap-align: center;\n  }\n`\n"],"names":["PseudoHtmlDiff","styles","css"],"mappings":";;;;;;;;;;;;;;;IAESA,cAAc;eAAdA,wBAAc;;IAEVC,MAAM;eAANA;;;;8BAJe;0BAEG;;;;;;;;;;;AAExB,MAAMA,aAASC,kBAAG,qBAmC2B"}

package/dist/client/components/react-dev-overlay/internal/container/RuntimeError/index.js

@@ -30,7 +30,7 @@ const _nooptemplate = require("../../helpers/noop-template");
 const _CallStackFrame = require("./CallStackFrame");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
-        "\n  [data-nextjs-call-stack-frame]:not(:last-child),\n  [data-nextjs-component-stack-frame]:not(:last-child) {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-expand-ignore-button]:focus:not(:focus-visible),\n  [data-expand-ignore-button] {\n    background: none;\n    border: none;\n    color: var(--color-font);\n    cursor: pointer;\n    font-size: var(--size-font);\n    margin: var(--size-gap) 0;\n    padding: 0;\n    text-decoration: underline;\n    outline: none;\n  }\n\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n\n  [data-nextjs-call-stack-frame] > h3,\n  [data-nextjs-component-stack-frame] > h3 {\n    margin-top: 0;\n    margin-bottom: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font);\n  }\n  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {\n    color: #666;\n    display: inline-block;\n  }\n  [data-nextjs-call-stack-frame] > div,\n  [data-nextjs-component-stack-frame] > div {\n    display: flex;\n    align-items: center;\n    padding-left: calc(var(--size-gap) + var(--size-gap-half));\n    font-size: var(--size-font-small);\n    color: #999;\n  }\n  [data-nextjs-call-stack-frame] > div > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n    flex-shrink: 0;\n    display: none;\n  }\n\n  [data-nextjs-call-stack-frame] > div[data-has-source],\n  [data-nextjs-component-stack-frame] > [role='link'] {\n    cursor: pointer;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source]:hover,\n  [data-nextjs-component-stack-frame] > [role='link']:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source] > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    display: unset;\n  }\n\n  [data-nextjs-call-stack-framework-icon] {\n    margin-right: var(--size-gap);\n  }\n  [data-nextjs-call-stack-framework-icon='next'] > mask {\n    mask-type: alpha;\n  }\n  [data-nextjs-call-stack-framework-icon='react'] {\n    color: rgb(20, 158, 202);\n  }\n  [data-nextjs-collapsed-call-stack-details][open]\n    [data-nextjs-call-stack-chevron-icon] {\n    transform: rotate(90deg);\n  }\n  [data-nextjs-collapsed-call-stack-details] summary {\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--size-gap);\n    list-style: none;\n  }\n  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {\n    display: none;\n  }\n\n  [data-nextjs-collapsed-call-stack-details] h3 {\n    color: #666;\n  }\n  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-nextjs-container-errors-pseudo-html] {\n    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse] {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    color: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    color: var(--color-ansi-green);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    color: var(--color-ansi-red);\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-error] {\n    color: var(--color-ansi-red);\n    font-weight: bold;\n  }\n  /* hide but text are still accessible in DOM */\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n"
+        "\n  [data-nextjs-call-stack-frame]:not(:last-child),\n  [data-nextjs-component-stack-frame]:not(:last-child) {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-expand-ignore-button]:focus:not(:focus-visible),\n  [data-expand-ignore-button] {\n    background: none;\n    border: none;\n    color: var(--color-font);\n    cursor: pointer;\n    font-size: var(--size-font);\n    margin: var(--size-gap) 0;\n    padding: 0;\n    text-decoration: underline;\n    outline: none;\n  }\n\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n\n  [data-nextjs-call-stack-frame] > h3,\n  [data-nextjs-component-stack-frame] > h3 {\n    margin-top: 0;\n    margin-bottom: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font);\n  }\n  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {\n    color: #666;\n    display: inline-block;\n  }\n  [data-nextjs-call-stack-frame] > div,\n  [data-nextjs-component-stack-frame] > div {\n    display: flex;\n    align-items: center;\n    padding-left: calc(var(--size-gap) + var(--size-gap-half));\n    font-size: var(--size-font-small);\n    color: #999;\n  }\n  [data-nextjs-call-stack-frame] > div > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n    flex-shrink: 0;\n    display: none;\n  }\n\n  [data-nextjs-call-stack-frame] > div[data-has-source],\n  [data-nextjs-component-stack-frame] > [role='link'] {\n    cursor: pointer;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source]:hover,\n  [data-nextjs-component-stack-frame] > [role='link']:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source] > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    display: unset;\n  }\n\n  [data-nextjs-call-stack-framework-icon] {\n    margin-right: var(--size-gap);\n  }\n  [data-nextjs-call-stack-framework-icon='next'] > mask {\n    mask-type: alpha;\n  }\n  [data-nextjs-call-stack-framework-icon='react'] {\n    color: rgb(20, 158, 202);\n  }\n  [data-nextjs-collapsed-call-stack-details][open]\n    [data-nextjs-call-stack-chevron-icon] {\n    transform: rotate(90deg);\n  }\n  [data-nextjs-collapsed-call-stack-details] summary {\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--size-gap);\n    list-style: none;\n  }\n  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {\n    display: none;\n  }\n\n  [data-nextjs-collapsed-call-stack-details] h3 {\n    color: #666;\n  }\n  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {\n    margin-bottom: var(--size-gap-double);\n  }\n"
     ]);
     _templateObject = function() {
         return data;

package/dist/client/components/react-dev-overlay/internal/container/RuntimeError/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { CodeFrame } from '../../components/CodeFrame'\nimport {\n  useFrames,\n  type ReadyRuntimeError,\n} from '../../helpers/get-error-by-type'\nimport { noop as css } from '../../helpers/noop-template'\nimport { CallStackFrame } from './CallStackFrame'\n\nexport type RuntimeErrorProps = { error: ReadyRuntimeError }\n\nexport function RuntimeError({ error }: RuntimeErrorProps) {\n  const [isIgnoredExpanded, setIsIgnoredExpanded] = React.useState(false)\n\n  const frames = useFrames(error)\n  const {\n    firstFrame,\n    allLeadingFrames,\n    trailingCallStackFrames,\n    displayedFramesCount,\n  } = React.useMemo(() => {\n    const filteredFrames = frames.filter((frame) =>\n      isIgnoredExpanded ? true : !frame.ignored\n    )\n\n    const firstFirstPartyFrameIndex = filteredFrames.findIndex(\n      (entry) =>\n        !entry.ignored &&\n        Boolean(entry.originalCodeFrame) &&\n        Boolean(entry.originalStackFrame)\n    )\n\n    return {\n      displayedFramesCount: filteredFrames.length,\n      firstFrame: filteredFrames[firstFirstPartyFrameIndex] ?? null,\n      allLeadingFrames:\n        firstFirstPartyFrameIndex < 0\n          ? []\n          : filteredFrames.slice(0, firstFirstPartyFrameIndex),\n      trailingCallStackFrames: filteredFrames.slice(\n        firstFirstPartyFrameIndex < 0 ? 0 : firstFirstPartyFrameIndex\n      ),\n    }\n  }, [frames, isIgnoredExpanded])\n\n  return (\n    <>\n      {firstFrame ? (\n        <>\n          <h2>Source</h2>\n          {allLeadingFrames.map((frame, frameIndex) => (\n            <CallStackFrame\n              key={`call-stack-leading-${frameIndex}`}\n              frame={frame}\n            />\n          ))}\n          <CodeFrame\n            stackFrame={firstFrame.originalStackFrame!}\n            codeFrame={firstFrame.originalCodeFrame!}\n          />\n        </>\n      ) : undefined}\n\n      {trailingCallStackFrames.map((frame, frameIndex) => (\n        <CallStackFrame\n          key={`call-stack-leading-${frameIndex}`}\n          frame={frame}\n        />\n      ))}\n      {\n        // if the default displayed ignored frames count is equal equal to the total frames count, hide the button\n        displayedFramesCount === frames.length && !isIgnoredExpanded ? null : (\n          <button\n            data-expand-ignore-button={isIgnoredExpanded}\n            onClick={() => setIsIgnoredExpanded(!isIgnoredExpanded)}\n          >\n            {`${isIgnoredExpanded ? 'Hide' : 'Show'} ignored frames`}\n          </button>\n        )\n      }\n    </>\n  )\n}\n\nexport const styles = css`\n  [data-nextjs-call-stack-frame]:not(:last-child),\n  [data-nextjs-component-stack-frame]:not(:last-child) {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-expand-ignore-button]:focus:not(:focus-visible),\n  [data-expand-ignore-button] {\n    background: none;\n    border: none;\n    color: var(--color-font);\n    cursor: pointer;\n    font-size: var(--size-font);\n    margin: var(--size-gap) 0;\n    padding: 0;\n    text-decoration: underline;\n    outline: none;\n  }\n\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n\n  [data-nextjs-call-stack-frame] > h3,\n  [data-nextjs-component-stack-frame] > h3 {\n    margin-top: 0;\n    margin-bottom: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font);\n  }\n  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {\n    color: #666;\n    display: inline-block;\n  }\n  [data-nextjs-call-stack-frame] > div,\n  [data-nextjs-component-stack-frame] > div {\n    display: flex;\n    align-items: center;\n    padding-left: calc(var(--size-gap) + var(--size-gap-half));\n    font-size: var(--size-font-small);\n    color: #999;\n  }\n  [data-nextjs-call-stack-frame] > div > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n    flex-shrink: 0;\n    display: none;\n  }\n\n  [data-nextjs-call-stack-frame] > div[data-has-source],\n  [data-nextjs-component-stack-frame] > [role='link'] {\n    cursor: pointer;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source]:hover,\n  [data-nextjs-component-stack-frame] > [role='link']:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source] > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    display: unset;\n  }\n\n  [data-nextjs-call-stack-framework-icon] {\n    margin-right: var(--size-gap);\n  }\n  [data-nextjs-call-stack-framework-icon='next'] > mask {\n    mask-type: alpha;\n  }\n  [data-nextjs-call-stack-framework-icon='react'] {\n    color: rgb(20, 158, 202);\n  }\n  [data-nextjs-collapsed-call-stack-details][open]\n    [data-nextjs-call-stack-chevron-icon] {\n    transform: rotate(90deg);\n  }\n  [data-nextjs-collapsed-call-stack-details] summary {\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--size-gap);\n    list-style: none;\n  }\n  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {\n    display: none;\n  }\n\n  [data-nextjs-collapsed-call-stack-details] h3 {\n    color: #666;\n  }\n  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-nextjs-container-errors-pseudo-html] {\n    position: relative;\n  }\n  [data-nextjs-container-errors-pseudo-html-collapse] {\n    position: absolute;\n    left: 10px;\n    top: 10px;\n    color: inherit;\n    background: none;\n    border: none;\n    padding: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='add'] {\n    color: var(--color-ansi-green);\n  }\n  [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n    color: var(--color-ansi-red);\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-error] {\n    color: var(--color-ansi-red);\n    font-weight: bold;\n  }\n  /* hide but text are still accessible in DOM */\n  [data-nextjs-container-errors-pseudo-html--hint] {\n    display: inline-block;\n    font-size: 0;\n  }\n  [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n    color: var(--color-accents-1);\n  }\n`\n"],"names":["RuntimeError","styles","error","isIgnoredExpanded","setIsIgnoredExpanded","React","useState","frames","useFrames","firstFrame","allLeadingFrames","trailingCallStackFrames","displayedFramesCount","useMemo","filteredFrames","filter","frame","ignored","firstFirstPartyFrameIndex","findIndex","entry","Boolean","originalCodeFrame","originalStackFrame","length","slice","h2","map","frameIndex","CallStackFrame","CodeFrame","stackFrame","codeFrame","undefined","button","data-expand-ignore-button","onClick","css"],"mappings":";;;;;;;;;;;;;;;IAWgBA,YAAY;eAAZA;;IAyEHC,MAAM;eAANA;;;;;;iEApFU;2BACG;gCAInB;8BACqB;gCACG;;;;;;;;;;AAIxB,SAASD,aAAa,KAA4B;IAA5B,IAAA,EAAEE,KAAK,EAAqB,GAA5B;IAC3B,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,OAAMC,QAAQ,CAAC;IAEjE,MAAMC,SAASC,IAAAA,yBAAS,EAACN;IACzB,MAAM,EACJO,UAAU,EACVC,gBAAgB,EAChBC,uBAAuB,EACvBC,oBAAoB,EACrB,GAAGP,OAAMQ,OAAO,CAAC;QAChB,MAAMC,iBAAiBP,OAAOQ,MAAM,CAAC,CAACC,QACpCb,oBAAoB,OAAO,CAACa,MAAMC,OAAO;QAG3C,MAAMC,4BAA4BJ,eAAeK,SAAS,CACxD,CAACC,QACC,CAACA,MAAMH,OAAO,IACdI,QAAQD,MAAME,iBAAiB,KAC/BD,QAAQD,MAAMG,kBAAkB;YAKtBT;QAFd,OAAO;YACLF,sBAAsBE,eAAeU,MAAM;YAC3Cf,YAAYK,CAAAA,4CAAAA,cAAc,CAACI,0BAA0B,YAAzCJ,4CAA6C;YACzDJ,kBACEQ,4BAA4B,IACxB,EAAE,GACFJ,eAAeW,KAAK,CAAC,GAAGP;YAC9BP,yBAAyBG,eAAeW,KAAK,CAC3CP,4BAA4B,IAAI,IAAIA;QAExC;IACF,GAAG;QAACX;QAAQJ;KAAkB;IAE9B,qBACE;;YACGM,2BACC;;kCACE,qBAACiB;kCAAG;;oBACHhB,iBAAiBiB,GAAG,CAAC,CAACX,OAAOY,2BAC5B,qBAACC,8BAAc;4BAEbb,OAAOA;2BADF,AAAC,wBAAqBY;kCAI/B,qBAACE,oBAAS;wBACRC,YAAYtB,WAAWc,kBAAkB;wBACzCS,WAAWvB,WAAWa,iBAAiB;;;iBAGzCW;YAEHtB,wBAAwBgB,GAAG,CAAC,CAACX,OAAOY,2BACnC,qBAACC,8BAAc;oBAEbb,OAAOA;mBADF,AAAC,wBAAqBY;YAK7B,0GAA0G;YAC1GhB,yBAAyBL,OAAOiB,MAAM,IAAI,CAACrB,oBAAoB,qBAC7D,qBAAC+B;gBACCC,6BAA2BhC;gBAC3BiC,SAAS,IAAMhC,qBAAqB,CAACD;0BAEpC,AAAC,KAAEA,CAAAA,oBAAoB,SAAS,MAAK,IAAE;;;;AAMpD;AAEO,MAAMF,aAASoC,kBAAG"}
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/internal/container/RuntimeError/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport { CodeFrame } from '../../components/CodeFrame'\nimport {\n  useFrames,\n  type ReadyRuntimeError,\n} from '../../helpers/get-error-by-type'\nimport { noop as css } from '../../helpers/noop-template'\nimport { CallStackFrame } from './CallStackFrame'\n\nexport type RuntimeErrorProps = { error: ReadyRuntimeError }\n\nexport function RuntimeError({ error }: RuntimeErrorProps) {\n  const [isIgnoredExpanded, setIsIgnoredExpanded] = React.useState(false)\n\n  const frames = useFrames(error)\n  const {\n    firstFrame,\n    allLeadingFrames,\n    trailingCallStackFrames,\n    displayedFramesCount,\n  } = React.useMemo(() => {\n    const filteredFrames = frames.filter((frame) =>\n      isIgnoredExpanded ? true : !frame.ignored\n    )\n\n    const firstFirstPartyFrameIndex = filteredFrames.findIndex(\n      (entry) =>\n        !entry.ignored &&\n        Boolean(entry.originalCodeFrame) &&\n        Boolean(entry.originalStackFrame)\n    )\n\n    return {\n      displayedFramesCount: filteredFrames.length,\n      firstFrame: filteredFrames[firstFirstPartyFrameIndex] ?? null,\n      allLeadingFrames:\n        firstFirstPartyFrameIndex < 0\n          ? []\n          : filteredFrames.slice(0, firstFirstPartyFrameIndex),\n      trailingCallStackFrames: filteredFrames.slice(\n        firstFirstPartyFrameIndex < 0 ? 0 : firstFirstPartyFrameIndex\n      ),\n    }\n  }, [frames, isIgnoredExpanded])\n\n  return (\n    <>\n      {firstFrame ? (\n        <>\n          <h2>Source</h2>\n          {allLeadingFrames.map((frame, frameIndex) => (\n            <CallStackFrame\n              key={`call-stack-leading-${frameIndex}`}\n              frame={frame}\n            />\n          ))}\n          <CodeFrame\n            stackFrame={firstFrame.originalStackFrame!}\n            codeFrame={firstFrame.originalCodeFrame!}\n          />\n        </>\n      ) : undefined}\n\n      {trailingCallStackFrames.map((frame, frameIndex) => (\n        <CallStackFrame\n          key={`call-stack-leading-${frameIndex}`}\n          frame={frame}\n        />\n      ))}\n      {\n        // if the default displayed ignored frames count is equal equal to the total frames count, hide the button\n        displayedFramesCount === frames.length && !isIgnoredExpanded ? null : (\n          <button\n            data-expand-ignore-button={isIgnoredExpanded}\n            onClick={() => setIsIgnoredExpanded(!isIgnoredExpanded)}\n          >\n            {`${isIgnoredExpanded ? 'Hide' : 'Show'} ignored frames`}\n          </button>\n        )\n      }\n    </>\n  )\n}\n\nexport const styles = css`\n  [data-nextjs-call-stack-frame]:not(:last-child),\n  [data-nextjs-component-stack-frame]:not(:last-child) {\n    margin-bottom: var(--size-gap-double);\n  }\n\n  [data-expand-ignore-button]:focus:not(:focus-visible),\n  [data-expand-ignore-button] {\n    background: none;\n    border: none;\n    color: var(--color-font);\n    cursor: pointer;\n    font-size: var(--size-font);\n    margin: var(--size-gap) 0;\n    padding: 0;\n    text-decoration: underline;\n    outline: none;\n  }\n\n  [data-nextjs-data-runtime-error-copy-button],\n  [data-nextjs-data-runtime-error-copy-button]:focus:not(:focus-visible) {\n    position: relative;\n    margin-left: var(--size-gap);\n    padding: 0;\n    border: none;\n    background: none;\n    outline: none;\n  }\n  [data-nextjs-data-runtime-error-copy-button] > svg {\n    vertical-align: middle;\n  }\n  .nextjs-data-runtime-error-copy-button {\n    color: inherit;\n  }\n  .nextjs-data-runtime-error-copy-button--initial:hover {\n    cursor: pointer;\n  }\n  .nextjs-data-runtime-error-copy-button[aria-disabled='true'] {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n  .nextjs-data-runtime-error-copy-button--error,\n  .nextjs-data-runtime-error-copy-button--error:hover {\n    color: var(--color-ansi-red);\n  }\n  .nextjs-data-runtime-error-copy-button--success {\n    color: var(--color-ansi-green);\n  }\n\n  [data-nextjs-call-stack-frame] > h3,\n  [data-nextjs-component-stack-frame] > h3 {\n    margin-top: 0;\n    margin-bottom: 0;\n    font-family: var(--font-stack-monospace);\n    font-size: var(--size-font);\n  }\n  [data-nextjs-call-stack-frame] > h3[data-nextjs-frame-expanded='false'] {\n    color: #666;\n    display: inline-block;\n  }\n  [data-nextjs-call-stack-frame] > div,\n  [data-nextjs-component-stack-frame] > div {\n    display: flex;\n    align-items: center;\n    padding-left: calc(var(--size-gap) + var(--size-gap-half));\n    font-size: var(--size-font-small);\n    color: #999;\n  }\n  [data-nextjs-call-stack-frame] > div > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    width: auto;\n    height: var(--size-font-small);\n    margin-left: var(--size-gap);\n    flex-shrink: 0;\n    display: none;\n  }\n\n  [data-nextjs-call-stack-frame] > div[data-has-source],\n  [data-nextjs-component-stack-frame] > [role='link'] {\n    cursor: pointer;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source]:hover,\n  [data-nextjs-component-stack-frame] > [role='link']:hover {\n    text-decoration: underline dotted;\n  }\n  [data-nextjs-call-stack-frame] > div[data-has-source] > svg,\n  [data-nextjs-component-stack-frame] > [role='link'] > svg {\n    display: unset;\n  }\n\n  [data-nextjs-call-stack-framework-icon] {\n    margin-right: var(--size-gap);\n  }\n  [data-nextjs-call-stack-framework-icon='next'] > mask {\n    mask-type: alpha;\n  }\n  [data-nextjs-call-stack-framework-icon='react'] {\n    color: rgb(20, 158, 202);\n  }\n  [data-nextjs-collapsed-call-stack-details][open]\n    [data-nextjs-call-stack-chevron-icon] {\n    transform: rotate(90deg);\n  }\n  [data-nextjs-collapsed-call-stack-details] summary {\n    display: flex;\n    align-items: center;\n    margin-bottom: var(--size-gap);\n    list-style: none;\n  }\n  [data-nextjs-collapsed-call-stack-details] summary::-webkit-details-marker {\n    display: none;\n  }\n\n  [data-nextjs-collapsed-call-stack-details] h3 {\n    color: #666;\n  }\n  [data-nextjs-collapsed-call-stack-details] [data-nextjs-call-stack-frame] {\n    margin-bottom: var(--size-gap-double);\n  }\n`\n"],"names":["RuntimeError","styles","error","isIgnoredExpanded","setIsIgnoredExpanded","React","useState","frames","useFrames","firstFrame","allLeadingFrames","trailingCallStackFrames","displayedFramesCount","useMemo","filteredFrames","filter","frame","ignored","firstFirstPartyFrameIndex","findIndex","entry","Boolean","originalCodeFrame","originalStackFrame","length","slice","h2","map","frameIndex","CallStackFrame","CodeFrame","stackFrame","codeFrame","undefined","button","data-expand-ignore-button","onClick","css"],"mappings":";;;;;;;;;;;;;;;IAWgBA,YAAY;eAAZA;;IAyEHC,MAAM;eAANA;;;;;;iEApFU;2BACG;gCAInB;8BACqB;gCACG;;;;;;;;;;AAIxB,SAASD,aAAa,KAA4B;IAA5B,IAAA,EAAEE,KAAK,EAAqB,GAA5B;IAC3B,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,OAAMC,QAAQ,CAAC;IAEjE,MAAMC,SAASC,IAAAA,yBAAS,EAACN;IACzB,MAAM,EACJO,UAAU,EACVC,gBAAgB,EAChBC,uBAAuB,EACvBC,oBAAoB,EACrB,GAAGP,OAAMQ,OAAO,CAAC;QAChB,MAAMC,iBAAiBP,OAAOQ,MAAM,CAAC,CAACC,QACpCb,oBAAoB,OAAO,CAACa,MAAMC,OAAO;QAG3C,MAAMC,4BAA4BJ,eAAeK,SAAS,CACxD,CAACC,QACC,CAACA,MAAMH,OAAO,IACdI,QAAQD,MAAME,iBAAiB,KAC/BD,QAAQD,MAAMG,kBAAkB;YAKtBT;QAFd,OAAO;YACLF,sBAAsBE,eAAeU,MAAM;YAC3Cf,YAAYK,CAAAA,4CAAAA,cAAc,CAACI,0BAA0B,YAAzCJ,4CAA6C;YACzDJ,kBACEQ,4BAA4B,IACxB,EAAE,GACFJ,eAAeW,KAAK,CAAC,GAAGP;YAC9BP,yBAAyBG,eAAeW,KAAK,CAC3CP,4BAA4B,IAAI,IAAIA;QAExC;IACF,GAAG;QAACX;QAAQJ;KAAkB;IAE9B,qBACE;;YACGM,2BACC;;kCACE,qBAACiB;kCAAG;;oBACHhB,iBAAiBiB,GAAG,CAAC,CAACX,OAAOY,2BAC5B,qBAACC,8BAAc;4BAEbb,OAAOA;2BADF,AAAC,wBAAqBY;kCAI/B,qBAACE,oBAAS;wBACRC,YAAYtB,WAAWc,kBAAkB;wBACzCS,WAAWvB,WAAWa,iBAAiB;;;iBAGzCW;YAEHtB,wBAAwBgB,GAAG,CAAC,CAACX,OAAOY,2BACnC,qBAACC,8BAAc;oBAEbb,OAAOA;mBADF,AAAC,wBAAqBY;YAK7B,0GAA0G;YAC1GhB,yBAAyBL,OAAOiB,MAAM,IAAI,CAACrB,oBAAoB,qBAC7D,qBAAC+B;gBACCC,6BAA2BhC;gBAC3BiC,SAAS,IAAMhC,qBAAqB,CAACD;0BAEpC,AAAC,KAAEA,CAAAA,oBAAoB,SAAS,MAAK,IAAE;;;;AAMpD;AAEO,MAAMF,aAASoC,kBAAG"}

package/dist/client/components/react-dev-overlay/internal/styles/ComponentStyles.js

@@ -20,6 +20,7 @@ const _VersionStalenessInfo = require("../components/VersionStalenessInfo");
 const _BuildError = require("../container/BuildError");
 const _Errors = require("../container/Errors");
 const _RuntimeError = require("../container/RuntimeError");
+const _componentstackpseudohtml = require("../container/RuntimeError/component-stack-pseudo-html");
 const _nooptemplate = require("../helpers/noop-template");
 function _templateObject() {
     const data = _tagged_template_literal_loose._([
@@ -33,6 +34,7 @@ function _templateObject() {
         "\n        ",
         "\n        ",
         "\n        ",
+        "\n        ",
         "\n      "
     ]);
     _templateObject = function() {
@@ -42,7 +44,7 @@ function _templateObject() {
 }
 function ComponentStyles() {
     return /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
-        children: (0, _nooptemplate.noop)(_templateObject(), _styles2.styles, _Toast.styles, _Dialog.styles, _styles1.styles, _styles.styles, _styles3.styles, _BuildError.styles, _Errors.styles, _RuntimeError.styles, _VersionStalenessInfo.styles)
+        children: (0, _nooptemplate.noop)(_templateObject(), _styles2.styles, _Toast.styles, _Dialog.styles, _styles1.styles, _styles.styles, _styles3.styles, _BuildError.styles, _Errors.styles, _RuntimeError.styles, _VersionStalenessInfo.styles, _componentstackpseudohtml.styles)
     });
 }
 

package/dist/client/components/react-dev-overlay/internal/styles/ComponentStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/styles/ComponentStyles.tsx"],"sourcesContent":["import { styles as codeFrame } from '../components/CodeFrame/styles'\nimport { styles as dialog } from '../components/Dialog'\nimport { styles as leftRightDialogHeader } from '../components/LeftRightDialogHeader/styles'\nimport { styles as overlay } from '../components/Overlay/styles'\nimport { styles as terminal } from '../components/Terminal/styles'\nimport { styles as toast } from '../components/Toast'\nimport { styles as versionStaleness } from '../components/VersionStalenessInfo'\nimport { styles as buildErrorStyles } from '../container/BuildError'\nimport { styles as containerErrorStyles } from '../container/Errors'\nimport { styles as containerRuntimeErrorStyles } from '../container/RuntimeError'\nimport { noop as css } from '../helpers/noop-template'\n\nexport function ComponentStyles() {\n  return (\n    <style>\n      {css`\n        ${overlay}\n        ${toast}\n        ${dialog}\n        ${leftRightDialogHeader}\n        ${codeFrame}\n        ${terminal}\n        ${buildErrorStyles}\n        ${containerErrorStyles}\n        ${containerRuntimeErrorStyles}\n        ${versionStaleness}\n      `}\n    </style>\n  )\n}\n"],"names":["ComponentStyles","style","css","overlay","toast","dialog","leftRightDialogHeader","codeFrame","terminal","buildErrorStyles","containerErrorStyles","containerRuntimeErrorStyles","versionStaleness"],"mappings":";;;;+BAYgBA;;;eAAAA;;;;;wBAZoB;wBACH;yBACe;yBACd;yBACC;uBACH;sCACW;4BACA;wBACI;8BACO;8BAC1B;;;;;;;;;;;;;;;;;;;;AAErB,SAASA;IACd,qBACE,qBAACC;sBACEC,kBAAG,qBACAC,eAAO,EACPC,aAAK,EACLC,cAAM,EACNC,eAAqB,EACrBC,cAAS,EACTC,eAAQ,EACRC,kBAAgB,EAChBC,cAAoB,EACpBC,oBAA2B,EAC3BC,4BAAgB;;AAI1B"}
+{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/internal/styles/ComponentStyles.tsx"],"sourcesContent":["import { styles as codeFrame } from '../components/CodeFrame/styles'\nimport { styles as dialog } from '../components/Dialog'\nimport { styles as leftRightDialogHeader } from '../components/LeftRightDialogHeader/styles'\nimport { styles as overlay } from '../components/Overlay/styles'\nimport { styles as terminal } from '../components/Terminal/styles'\nimport { styles as toast } from '../components/Toast'\nimport { styles as versionStaleness } from '../components/VersionStalenessInfo'\nimport { styles as buildErrorStyles } from '../container/BuildError'\nimport { styles as containerErrorStyles } from '../container/Errors'\nimport { styles as containerRuntimeErrorStyles } from '../container/RuntimeError'\nimport { styles as pseudoHtmlStyles } from '../container/RuntimeError/component-stack-pseudo-html'\nimport { noop as css } from '../helpers/noop-template'\n\nexport function ComponentStyles() {\n  return (\n    <style>\n      {css`\n        ${overlay}\n        ${toast}\n        ${dialog}\n        ${leftRightDialogHeader}\n        ${codeFrame}\n        ${terminal}\n        ${buildErrorStyles}\n        ${containerErrorStyles}\n        ${containerRuntimeErrorStyles}\n        ${versionStaleness}\n        ${pseudoHtmlStyles}\n      `}\n    </style>\n  )\n}\n"],"names":["ComponentStyles","style","css","overlay","toast","dialog","leftRightDialogHeader","codeFrame","terminal","buildErrorStyles","containerErrorStyles","containerRuntimeErrorStyles","versionStaleness","pseudoHtmlStyles"],"mappings":";;;;+BAagBA;;;eAAAA;;;;;wBAboB;wBACH;yBACe;yBACd;yBACC;uBACH;sCACW;4BACA;wBACI;8BACO;0CACX;8BACf;;;;;;;;;;;;;;;;;;;;;AAErB,SAASA;IACd,qBACE,qBAACC;sBACEC,kBAAG,qBACAC,eAAO,EACPC,aAAK,EACLC,cAAM,EACNC,eAAqB,EACrBC,cAAS,EACTC,eAAQ,EACRC,kBAAgB,EAChBC,cAAoB,EACpBC,oBAA2B,EAC3BC,4BAAgB,EAChBC,gCAAgB;;AAI1B"}