next 15.1.1-canary.11 → 15.1.1-canary.12

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

@@ -0,0 +1,392 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+0 && (module.exports = {
+    Errors: null,
+    styles: null
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Errors: function() {
+        return Errors;
+    },
+    styles: function() {
+        return styles;
+    }
+});
+const _tagged_template_literal_loose = require("@swc/helpers/_/_tagged_template_literal_loose");
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _shared = require("../../../shared");
+const _Dialog = require("../components/Dialog");
+const _LeftRightDialogHeader = require("../components/LeftRightDialogHeader");
+const _Overlay = require("../components/Overlay");
+const _Toast = require("../components/Toast");
+const _geterrorbytype = require("../helpers/get-error-by-type");
+const _nooptemplate = require("../helpers/noop-template");
+const _CloseIcon = require("../icons/CloseIcon");
+const _RuntimeError = require("./RuntimeError");
+const _VersionStalenessInfo = require("../components/VersionStalenessInfo");
+const _errorsource = require("../../../../../../shared/lib/error-source");
+const _hotlinkedtext = require("../components/hot-linked-text");
+const _componentstackpseudohtml = require("./RuntimeError/component-stack-pseudo-html");
+const _hydrationerrorinfo = require("../helpers/hydration-error-info");
+const _nodejsinspector = require("../components/nodejs-inspector");
+const _copybutton = require("../components/copy-button");
+const _consoleerror = require("../helpers/console-error");
+const _errortelemetryutils = require("../../../../../../lib/error-telemetry-utils");
+function _templateObject() {
+    const data = _tagged_template_literal_loose._([
+        "\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"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+function isNextjsLink(text) {
+    return text.startsWith('https://nextjs.org');
+}
+function ErrorDescription(param) {
+    let { error, hydrationWarning } = param;
+    const isUnhandledOrReplayError = (0, _consoleerror.isUnhandledConsoleOrRejection)(error);
+    const unhandledErrorType = isUnhandledOrReplayError ? (0, _consoleerror.getUnhandledErrorType)(error) : null;
+    const isConsoleErrorStringMessage = unhandledErrorType === 'string';
+    // If the error is:
+    // - hydration warning
+    // - captured console error or unhandled rejection
+    // skip displaying the error name
+    const title = isUnhandledOrReplayError && isConsoleErrorStringMessage || hydrationWarning ? '' : error.name + ': ';
+    // If it's replayed error, display the environment name
+    const environmentName = 'environmentName' in error ? error['environmentName'] : '';
+    const envPrefix = environmentName ? "[ " + environmentName + " ] " : '';
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            envPrefix,
+            title,
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_hotlinkedtext.HotlinkedText, {
+                text: hydrationWarning || error.message,
+                matcher: isNextjsLink
+            })
+        ]
+    });
+}
+function getErrorSignature(ev) {
+    const { event } = ev;
+    switch(event.type){
+        case _shared.ACTION_UNHANDLED_ERROR:
+        case _shared.ACTION_UNHANDLED_REJECTION:
+            {
+                return event.reason.name + "::" + event.reason.message + "::" + event.reason.stack;
+            }
+        default:
+            {}
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const _ = event;
+    return '';
+}
+function Errors(param) {
+    let { isAppDir, errors, initialDisplayState, versionInfo, hasStaticIndicator, debugInfo } = param;
+    var _activeError_componentStackFrames;
+    const [lookups, setLookups] = (0, _react.useState)({});
+    const [readyErrors, nextError] = (0, _react.useMemo)(()=>{
+        let ready = [];
+        let next = null;
+        // Ensure errors are displayed in the order they occurred in:
+        for(let idx = 0; idx < errors.length; ++idx){
+            const e = errors[idx];
+            const { id } = e;
+            if (id in lookups) {
+                ready.push(lookups[id]);
+                continue;
+            }
+            // Check for duplicate errors
+            if (idx > 0) {
+                const prev = errors[idx - 1];
+                if (getErrorSignature(prev) === getErrorSignature(e)) {
+                    continue;
+                }
+            }
+            next = e;
+            break;
+        }
+        return [
+            ready,
+            next
+        ];
+    }, [
+        errors,
+        lookups
+    ]);
+    const isLoading = (0, _react.useMemo)(()=>{
+        return readyErrors.length < 1 && Boolean(errors.length);
+    }, [
+        errors.length,
+        readyErrors.length
+    ]);
+    (0, _react.useEffect)(()=>{
+        if (nextError == null) {
+            return;
+        }
+        let mounted = true;
+        (0, _geterrorbytype.getErrorByType)(nextError, isAppDir).then((resolved)=>{
+            // We don't care if the desired error changed while we were resolving,
+            // thus we're not tracking it using a ref. Once the work has been done,
+            // we'll store it.
+            if (mounted) {
+                setLookups((m)=>({
+                        ...m,
+                        [resolved.id]: resolved
+                    }));
+            }
+        }, ()=>{
+        // TODO: handle this, though an edge case
+        });
+        return ()=>{
+            mounted = false;
+        };
+    }, [
+        nextError,
+        isAppDir
+    ]);
+    const [displayState, setDisplayState] = (0, _react.useState)(initialDisplayState);
+    const [activeIdx, setActiveIndex] = (0, _react.useState)(0);
+    const previous = (0, _react.useCallback)(()=>setActiveIndex((v)=>Math.max(0, v - 1)), []);
+    const next = (0, _react.useCallback)(()=>setActiveIndex((v)=>Math.max(0, Math.min(readyErrors.length - 1, v + 1))), [
+        readyErrors.length
+    ]);
+    const activeError = (0, _react.useMemo)(()=>{
+        var _readyErrors_activeIdx;
+        return (_readyErrors_activeIdx = readyErrors[activeIdx]) != null ? _readyErrors_activeIdx : null;
+    }, [
+        activeIdx,
+        readyErrors
+    ]);
+    // Reset component state when there are no errors to be displayed.
+    // This should never happen, but lets handle it.
+    (0, _react.useEffect)(()=>{
+        if (errors.length < 1) {
+            setLookups({});
+            setDisplayState('hidden');
+            setActiveIndex(0);
+        }
+    }, [
+        errors.length
+    ]);
+    const minimize = (0, _react.useCallback)(()=>setDisplayState('minimized'), []);
+    const hide = (0, _react.useCallback)(()=>setDisplayState('hidden'), []);
+    const fullscreen = (0, _react.useCallback)(()=>setDisplayState('fullscreen'), []);
+    // This component shouldn't be rendered with no errors, but if it is, let's
+    // handle it gracefully by rendering nothing.
+    if (errors.length < 1 || activeError == null) {
+        return null;
+    }
+    if (isLoading) {
+        // TODO: better loading state
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Overlay.Overlay, {});
+    }
+    if (displayState === 'hidden') {
+        return null;
+    }
+    if (displayState === 'minimized') {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Toast.Toast, {
+            "data-nextjs-toast": true,
+            className: "nextjs-toast-errors-parent" + (hasStaticIndicator ? ' nextjs-error-with-static' : ''),
+            onClick: fullscreen,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: "nextjs-toast-errors",
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("svg", {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "24",
+                        height: "24",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("circle", {
+                                cx: "12",
+                                cy: "12",
+                                r: "10"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("line", {
+                                x1: "12",
+                                y1: "8",
+                                x2: "12",
+                                y2: "12"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("line", {
+                                x1: "12",
+                                y1: "16",
+                                x2: "12.01",
+                                y2: "16"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                        children: [
+                            readyErrors.length,
+                            " issue",
+                            readyErrors.length > 1 ? 's' : ''
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                        "data-nextjs-toast-errors-hide-button": true,
+                        className: "nextjs-toast-hide-button",
+                        type: "button",
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            hide();
+                        },
+                        "aria-label": "Hide Issues",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_CloseIcon.CloseIcon, {})
+                    })
+                ]
+            })
+        });
+    }
+    const error = activeError.error;
+    const isServerError = [
+        'server',
+        'edge-server'
+    ].includes((0, _errorsource.getErrorSource)(error) || '');
+    const isUnhandledError = (0, _consoleerror.isUnhandledConsoleOrRejection)(error);
+    const errorDetails = error.details || {};
+    const notes = errorDetails.notes || '';
+    const [warningTemplate, serverContent, clientContent] = errorDetails.warning || [
+        null,
+        '',
+        ''
+    ];
+    const hydrationErrorType = (0, _hydrationerrorinfo.getHydrationWarningType)(warningTemplate);
+    const hydrationWarning = warningTemplate ? warningTemplate.replace('%s', serverContent).replace('%s', clientContent).replace('%s', '') // remove the %s for stack
+    .replace(/%s$/, '') // If there's still a %s at the end, remove it
+    .replace(/^Warning: /, '').replace(/^Error: /, '') : null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Overlay.Overlay, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dialog.Dialog, {
+            type: "error",
+            "aria-labelledby": "nextjs__container_errors_label",
+            "aria-describedby": "nextjs__container_errors_desc",
+            onClose: isServerError ? undefined : minimize,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Dialog.DialogContent, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Dialog.DialogHeader, {
+                        className: "nextjs-container-errors-header",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_LeftRightDialogHeader.LeftRightDialogHeader, {
+                                previous: activeIdx > 0 ? previous : null,
+                                next: activeIdx < readyErrors.length - 1 ? next : null,
+                                close: isServerError ? undefined : minimize,
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("small", {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                children: activeIdx + 1
+                                            }),
+                                            " of",
+                                            ' ',
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                                "data-nextjs-dialog-header-total-count": true,
+                                                children: readyErrors.length
+                                            }),
+                                            ' issue',
+                                            readyErrors.length < 2 ? '' : 's'
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_VersionStalenessInfo.VersionStalenessInfo, {
+                                        versionInfo: versionInfo
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                className: "nextjs__container_errors__error_title",
+                                "data-nextjs-error-code": (0, _errortelemetryutils.extractNextErrorCode)(error),
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)("h1", {
+                                        id: "nextjs__container_errors_label",
+                                        className: "nextjs__container_errors_label",
+                                        children: isServerError ? 'Server Error' : isUnhandledError ? 'Console Error' : 'Unhandled Runtime Error'
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                                        children: [
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_copybutton.CopyButton, {
+                                                "data-nextjs-data-runtime-error-copy-stack": true,
+                                                actionLabel: "Copy error stack",
+                                                successLabel: "Copied",
+                                                content: error.stack || '',
+                                                disabled: !error.stack
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_nodejsinspector.NodejsInspectorCopyButton, {
+                                                devtoolsFrontendUrl: debugInfo == null ? void 0 : debugInfo.devtoolsFrontendUrl
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                                id: "nextjs__container_errors_desc",
+                                className: "nextjs__container_errors_desc",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ErrorDescription, {
+                                    error: error,
+                                    hydrationWarning: hydrationWarning
+                                })
+                            }),
+                            notes ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                                    id: "nextjs__container_errors__notes",
+                                    className: "nextjs__container_errors__notes",
+                                    children: notes
+                                })
+                            }) : null,
+                            hydrationWarning ? /*#__PURE__*/ (0, _jsxruntime.jsx)("p", {
+                                id: "nextjs__container_errors__link",
+                                className: "nextjs__container_errors__link",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_hotlinkedtext.HotlinkedText, {
+                                    text: "See more info here: https://nextjs.org/docs/messages/react-hydration-error"
+                                })
+                            }) : null,
+                            hydrationWarning && (((_activeError_componentStackFrames = activeError.componentStackFrames) == null ? void 0 : _activeError_componentStackFrames.length) || !!errorDetails.reactOutputComponentDiff) ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_componentstackpseudohtml.PseudoHtmlDiff, {
+                                className: "nextjs__container_errors__component-stack",
+                                hydrationMismatchType: hydrationErrorType,
+                                componentStackFrames: activeError.componentStackFrames || [],
+                                firstContent: serverContent,
+                                secondContent: clientContent,
+                                reactOutputComponentDiff: errorDetails.reactOutputComponentDiff
+                            }) : null,
+                            isServerError ? /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("small", {
+                                    children: "This error happened while generating the page. Any console logs will be displayed in the terminal window."
+                                })
+                            }) : undefined
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Dialog.DialogBody, {
+                        className: "nextjs-container-errors-body",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_RuntimeError.RuntimeError, {
+                            error: activeError
+                        }, activeError.id.toString())
+                    })
+                ]
+            })
+        })
+    });
+}
+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 });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=Errors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/Errors.tsx"],"sourcesContent":["import { useState, useEffect, useMemo, useCallback } 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 '../helpers/hydration-error-info'\nimport { NodejsInspectorCopyButton } from '../components/nodejs-inspector'\nimport { CopyButton } from '../components/copy-button'\nimport {\n  getUnhandledErrorType,\n  isUnhandledConsoleOrRejection,\n} from '../helpers/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 as never\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    let mounted = true\n\n    getErrorByType(nextError, isAppDir).then(\n      (resolved) => {\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        if (mounted) {\n          setLookups((m) => ({ ...m, [resolved.id]: resolved }))\n        }\n      },\n      () => {\n        // TODO: handle this, though an edge case\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        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            {readyErrors.length} issue{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          <DialogBody className=\"nextjs-container-errors-body\">\n            <RuntimeError key={activeError.id.toString()} error={activeError} />\n          </DialogBody>\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","className","onClick","div","svg","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","circle","cx","cy","r","line","x1","y1","x2","y2","span","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","DialogBody","RuntimeError","toString","css"],"mappings":"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"}

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/CallStackFrame.d.ts

@@ -0,0 +1,4 @@
+import { type OriginalStackFrame } from '../../helpers/stack-frame';
+export declare const CallStackFrame: React.FC<{
+    frame: OriginalStackFrame;
+}>;

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

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CallStackFrame", {
+    enumerable: true,
+    get: function() {
+        return CallStackFrame;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _stackframe = require("../../helpers/stack-frame");
+const _useopenineditor = require("../../helpers/use-open-in-editor");
+const _hotlinkedtext = require("../../components/hot-linked-text");
+const CallStackFrame = function CallStackFrame(param) {
+    let { frame } = param;
+    var _frame_originalStackFrame;
+    // TODO: ability to expand resolved frames
+    // TODO: render error or external indicator
+    const f = (_frame_originalStackFrame = frame.originalStackFrame) != null ? _frame_originalStackFrame : frame.sourceStackFrame;
+    const hasSource = Boolean(frame.originalCodeFrame);
+    const open = (0, _useopenineditor.useOpenInEditor)(hasSource ? {
+        file: f.file,
+        lineNumber: f.lineNumber,
+        column: f.column
+    } : undefined);
+    // Format method to strip out the webpack layer prefix.
+    // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx
+    const formattedMethod = f.methodName.replace(/^\([\w-]+\)\//, '');
+    // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,
+    // we'll skip rendering the frame in this case.
+    const fileSource = (0, _stackframe.getFrameSource)(f);
+    if (!fileSource) {
+        return null;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        "data-nextjs-call-stack-frame": true,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("h3", {
+                "data-nextjs-frame-expanded": !frame.ignored,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_hotlinkedtext.HotlinkedText, {
+                    text: formattedMethod
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                "data-has-source": hasSource ? 'true' : undefined,
+                "data-no-source": hasSource ? undefined : 'true',
+                tabIndex: hasSource ? 10 : undefined,
+                role: hasSource ? 'link' : undefined,
+                onClick: open,
+                title: hasSource ? 'Click to open in your editor' : undefined,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        children: fileSource
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("svg", {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("path", {
+                                d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("polyline", {
+                                points: "15 3 21 3 21 9"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("line", {
+                                x1: "10",
+                                y1: "14",
+                                x2: "21",
+                                y2: "3"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
+  Object.defineProperty(exports.default, '__esModule', { value: true });
+  Object.assign(exports.default, exports);
+  module.exports = exports.default;
+}
+
+//# sourceMappingURL=CallStackFrame.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/CallStackFrame.tsx"],"sourcesContent":["import type { StackFrame } from 'next/dist/compiled/stacktrace-parser'\nimport {\n  getFrameSource,\n  type OriginalStackFrame,\n} from '../../helpers/stack-frame'\nimport { useOpenInEditor } from '../../helpers/use-open-in-editor'\nimport { HotlinkedText } from '../../components/hot-linked-text'\n\nexport const CallStackFrame: React.FC<{\n  frame: OriginalStackFrame\n}> = function CallStackFrame({ frame }) {\n  // TODO: ability to expand resolved frames\n  // TODO: render error or external indicator\n\n  const f: StackFrame = frame.originalStackFrame ?? frame.sourceStackFrame\n  const hasSource = Boolean(frame.originalCodeFrame)\n  const open = useOpenInEditor(\n    hasSource\n      ? {\n          file: f.file,\n          lineNumber: f.lineNumber,\n          column: f.column,\n        }\n      : undefined\n  )\n\n  // Format method to strip out the webpack layer prefix.\n  // e.g. (app-pages-browser)/./app/page.tsx -> ./app/page.tsx\n  const formattedMethod = f.methodName.replace(/^\\([\\w-]+\\)\\//, '')\n\n  // Formatted file source could be empty. e.g. <anonymous> will be formatted to empty string,\n  // we'll skip rendering the frame in this case.\n  const fileSource = getFrameSource(f)\n  if (!fileSource) {\n    return null\n  }\n\n  return (\n    <div data-nextjs-call-stack-frame>\n      <h3 data-nextjs-frame-expanded={!frame.ignored}>\n        <HotlinkedText text={formattedMethod} />\n      </h3>\n      <div\n        data-has-source={hasSource ? 'true' : undefined}\n        data-no-source={hasSource ? undefined : 'true'}\n        tabIndex={hasSource ? 10 : undefined}\n        role={hasSource ? 'link' : undefined}\n        onClick={open}\n        title={hasSource ? 'Click to open in your editor' : undefined}\n      >\n        <span>{fileSource}</span>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        >\n          <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"></path>\n          <polyline points=\"15 3 21 3 21 9\"></polyline>\n          <line x1=\"10\" y1=\"14\" x2=\"21\" y2=\"3\"></line>\n        </svg>\n      </div>\n    </div>\n  )\n}\n"],"names":["CallStackFrame","frame","f","originalStackFrame","sourceStackFrame","hasSource","Boolean","originalCodeFrame","open","useOpenInEditor","file","lineNumber","column","undefined","formattedMethod","methodName","replace","fileSource","getFrameSource","div","data-nextjs-call-stack-frame","h3","data-nextjs-frame-expanded","ignored","HotlinkedText","text","data-has-source","data-no-source","tabIndex","role","onClick","title","span","svg","xmlns","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","path","d","polyline","points","line","x1","y1","x2","y2"],"mappings":";;;;+BAQaA;;;eAAAA;;;;4BAJN;iCACyB;+BACF;AAEvB,MAAMA,iBAER,SAASA,eAAe,KAAS;IAAT,IAAA,EAAEC,KAAK,EAAE,GAAT;QAILA;IAHtB,0CAA0C;IAC1C,2CAA2C;IAE3C,MAAMC,IAAgBD,CAAAA,4BAAAA,MAAME,kBAAkB,YAAxBF,4BAA4BA,MAAMG,gBAAgB;IACxE,MAAMC,YAAYC,QAAQL,MAAMM,iBAAiB;IACjD,MAAMC,OAAOC,IAAAA,gCAAe,EAC1BJ,YACI;QACEK,MAAMR,EAAEQ,IAAI;QACZC,YAAYT,EAAES,UAAU;QACxBC,QAAQV,EAAEU,MAAM;IAClB,IACAC;IAGN,uDAAuD;IACvD,4DAA4D;IAC5D,MAAMC,kBAAkBZ,EAAEa,UAAU,CAACC,OAAO,CAAC,iBAAiB;IAE9D,4FAA4F;IAC5F,+CAA+C;IAC/C,MAAMC,aAAaC,IAAAA,0BAAc,EAAChB;IAClC,IAAI,CAACe,YAAY;QACf,OAAO;IACT;IAEA,qBACE,sBAACE;QAAIC,8BAA4B;;0BAC/B,qBAACC;gBAAGC,8BAA4B,CAACrB,MAAMsB,OAAO;0BAC5C,cAAA,qBAACC,4BAAa;oBAACC,MAAMX;;;0BAEvB,sBAACK;gBACCO,mBAAiBrB,YAAY,SAASQ;gBACtCc,kBAAgBtB,YAAYQ,YAAY;gBACxCe,UAAUvB,YAAY,KAAKQ;gBAC3BgB,MAAMxB,YAAY,SAASQ;gBAC3BiB,SAAStB;gBACTuB,OAAO1B,YAAY,iCAAiCQ;;kCAEpD,qBAACmB;kCAAMf;;kCACP,sBAACgB;wBACCC,OAAM;wBACNC,SAAQ;wBACRC,MAAK;wBACLC,QAAO;wBACPC,aAAY;wBACZC,eAAc;wBACdC,gBAAe;;0CAEf,qBAACC;gCAAKC,GAAE;;0CACR,qBAACC;gCAASC,QAAO;;0CACjB,qBAACC;gCAAKC,IAAG;gCAAKC,IAAG;gCAAKC,IAAG;gCAAKC,IAAG;;;;;;;;AAK3C"}

package/dist/client/components/react-dev-overlay/_experimental/internal/container/RuntimeError/ComponentStackFrameRow.d.ts

@@ -0,0 +1,4 @@
+import type { ComponentStackFrame } from '../../helpers/parse-component-stack';
+export declare function ComponentStackFrameRow({ componentStackFrame, }: {
+    componentStackFrame: ComponentStackFrame;
+}): import("react/jsx-runtime").JSX.Element;