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

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/nodejs-inspector.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from './copy-button';
+// Inline this helper to avoid widely used across the codebase,
+// as for this feature the Chrome detector doesn't need to be super accurate.
+function isChrome() {
+    if (typeof window === 'undefined') return false;
+    const isChromium = 'chrome' in window && window.chrome;
+    const vendorName = window.navigator.vendor;
+    return isChromium !== null && isChromium !== undefined && vendorName === 'Google Inc.';
+}
+const isChromeBrowser = isChrome();
+function NodeJsIcon(props) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 44 44",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs("g", {
+                clipPath: "url(#clip0_1546_2)",
+                children: [
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M22 0L41.0526 11V33L22 44L2.94744 33V11L22 0Z",
+                        fill: "#71BD55"
+                    }),
+                    /*#__PURE__*/ _jsx("path", {
+                        d: "M41.0493 11.0001L41.0493 33L22 1.5583e-07L41.0493 11.0001Z",
+                        fill: "#A1DF83"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("defs", {
+                children: /*#__PURE__*/ _jsx("clipPath", {
+                    id: "clip0_1546_2",
+                    children: /*#__PURE__*/ _jsx("rect", {
+                        width: "44",
+                        height: "44",
+                        fill: "white"
+                    })
+                })
+            })
+        ]
+    });
+}
+function NodeJsDisabledIcon(props) {
+    return /*#__PURE__*/ _jsxs("svg", {
+        width: "44",
+        height: "44",
+        viewBox: "0 0 44 44",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("path", {
+                d: "M4.44744 11.866L22 1.73205L39.5526 11.866V32.134L22 42.2679L4.44744 32.134V11.866Z",
+                stroke: "currentColor",
+                fill: "transparent",
+                strokeWidth: "3",
+                strokeLinejoin: "round"
+            }),
+            /*#__PURE__*/ _jsx("path", {
+                d: "M22 2L39 32",
+                stroke: "currentColor",
+                strokeWidth: "3",
+                strokeLinecap: "round"
+            })
+        ]
+    });
+}
+const label = 'Learn more about enabling Node.js inspector for server code with Chrome DevTools';
+export function NodejsInspectorCopyButton(param) {
+    let { devtoolsFrontendUrl } = param;
+    const content = devtoolsFrontendUrl || '';
+    const disabled = !content || !isChromeBrowser;
+    if (disabled) {
+        return /*#__PURE__*/ _jsx("a", {
+            title: label,
+            "aria-label": label,
+            className: "nextjs-data-runtime-error-inspect-link",
+            href: "https://nextjs.org/docs/app/building-your-application/configuring/debugging#server-side-code",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            children: /*#__PURE__*/ _jsx(NodeJsDisabledIcon, {
+                width: 16,
+                height: 16
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(CopyButton, {
+        "data-nextjs-data-runtime-error-copy-devtools-url": true,
+        actionLabel: 'Copy Chrome DevTools URL',
+        successLabel: "Copied",
+        content: content,
+        icon: /*#__PURE__*/ _jsx(NodeJsIcon, {
+            width: 16,
+            height: 16
+        })
+    });
+}
+
+//# sourceMappingURL=nodejs-inspector.js.map

package/dist/esm/client/components/react-dev-overlay/_experimental/internal/components/nodejs-inspector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/components/nodejs-inspector.tsx"],"sourcesContent":["import { CopyButton } from './copy-button'\n\n// Inline this helper to avoid widely used across the codebase,\n// as for this feature the Chrome detector doesn't need to be super accurate.\nfunction isChrome() {\n  if (typeof window === 'undefined') return false\n  const isChromium = 'chrome' in window && window.chrome\n  const vendorName = window.navigator.vendor\n\n  return (\n    isChromium !== null &&\n    isChromium !== undefined &&\n    vendorName === 'Google Inc.'\n  )\n}\n\nconst isChromeBrowser = isChrome()\n\nfunction NodeJsIcon(props: any) {\n  return (\n    <svg\n      width=\"44\"\n      height=\"44\"\n      viewBox=\"0 0 44 44\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <g clipPath=\"url(#clip0_1546_2)\">\n        <path\n          d=\"M22 0L41.0526 11V33L22 44L2.94744 33V11L22 0Z\"\n          fill=\"#71BD55\"\n        />\n        <path\n          d=\"M41.0493 11.0001L41.0493 33L22 1.5583e-07L41.0493 11.0001Z\"\n          fill=\"#A1DF83\"\n        />\n      </g>\n      <defs>\n        <clipPath id=\"clip0_1546_2\">\n          <rect width=\"44\" height=\"44\" fill=\"white\" />\n        </clipPath>\n      </defs>\n    </svg>\n  )\n}\n\nfunction NodeJsDisabledIcon(props: any) {\n  return (\n    <svg\n      width=\"44\"\n      height=\"44\"\n      viewBox=\"0 0 44 44\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path\n        d=\"M4.44744 11.866L22 1.73205L39.5526 11.866V32.134L22 42.2679L4.44744 32.134V11.866Z\"\n        stroke=\"currentColor\"\n        fill=\"transparent\"\n        strokeWidth=\"3\"\n        strokeLinejoin=\"round\"\n      />\n      <path\n        d=\"M22 2L39 32\"\n        stroke=\"currentColor\"\n        strokeWidth=\"3\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  )\n}\n\nconst label =\n  'Learn more about enabling Node.js inspector for server code with Chrome DevTools'\n\nexport function NodejsInspectorCopyButton({\n  devtoolsFrontendUrl,\n}: {\n  devtoolsFrontendUrl: string | undefined\n}) {\n  const content = devtoolsFrontendUrl || ''\n  const disabled = !content || !isChromeBrowser\n  if (disabled) {\n    return (\n      <a\n        title={label}\n        aria-label={label}\n        className=\"nextjs-data-runtime-error-inspect-link\"\n        href={`https://nextjs.org/docs/app/building-your-application/configuring/debugging#server-side-code`}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        <NodeJsDisabledIcon width={16} height={16} />\n      </a>\n    )\n  }\n  return (\n    <CopyButton\n      data-nextjs-data-runtime-error-copy-devtools-url\n      actionLabel={'Copy Chrome DevTools URL'}\n      successLabel=\"Copied\"\n      content={content}\n      icon={<NodeJsIcon width={16} height={16} />}\n    />\n  )\n}\n"],"names":["CopyButton","isChrome","window","isChromium","chrome","vendorName","navigator","vendor","undefined","isChromeBrowser","NodeJsIcon","props","svg","width","height","viewBox","fill","xmlns","g","clipPath","path","d","defs","id","rect","NodeJsDisabledIcon","stroke","strokeWidth","strokeLinejoin","strokeLinecap","label","NodejsInspectorCopyButton","devtoolsFrontendUrl","content","disabled","a","title","aria-label","className","href","target","rel","data-nextjs-data-runtime-error-copy-devtools-url","actionLabel","successLabel","icon"],"mappings":";AAAA,SAASA,UAAU,QAAQ,gBAAe;AAE1C,+DAA+D;AAC/D,6EAA6E;AAC7E,SAASC;IACP,IAAI,OAAOC,WAAW,aAAa,OAAO;IAC1C,MAAMC,aAAa,YAAYD,UAAUA,OAAOE,MAAM;IACtD,MAAMC,aAAaH,OAAOI,SAAS,CAACC,MAAM;IAE1C,OACEJ,eAAe,QACfA,eAAeK,aACfH,eAAe;AAEnB;AAEA,MAAMI,kBAAkBR;AAExB,SAASS,WAAWC,KAAU;IAC5B,qBACE,MAACC;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACL,GAAGN,KAAK;;0BAET,MAACO;gBAAEC,UAAS;;kCACV,KAACC;wBACCC,GAAE;wBACFL,MAAK;;kCAEP,KAACI;wBACCC,GAAE;wBACFL,MAAK;;;;0BAGT,KAACM;0BACC,cAAA,KAACH;oBAASI,IAAG;8BACX,cAAA,KAACC;wBAAKX,OAAM;wBAAKC,QAAO;wBAAKE,MAAK;;;;;;AAK5C;AAEA,SAASS,mBAAmBd,KAAU;IACpC,qBACE,MAACC;QACCC,OAAM;QACNC,QAAO;QACPC,SAAQ;QACRC,MAAK;QACLC,OAAM;QACL,GAAGN,KAAK;;0BAET,KAACS;gBACCC,GAAE;gBACFK,QAAO;gBACPV,MAAK;gBACLW,aAAY;gBACZC,gBAAe;;0BAEjB,KAACR;gBACCC,GAAE;gBACFK,QAAO;gBACPC,aAAY;gBACZE,eAAc;;;;AAItB;AAEA,MAAMC,QACJ;AAEF,OAAO,SAASC,0BAA0B,KAIzC;IAJyC,IAAA,EACxCC,mBAAmB,EAGpB,GAJyC;IAKxC,MAAMC,UAAUD,uBAAuB;IACvC,MAAME,WAAW,CAACD,WAAW,CAACxB;IAC9B,IAAIyB,UAAU;QACZ,qBACE,KAACC;YACCC,OAAON;YACPO,cAAYP;YACZQ,WAAU;YACVC,MAAO;YACPC,QAAO;YACPC,KAAI;sBAEJ,cAAA,KAAChB;gBAAmBZ,OAAO;gBAAIC,QAAQ;;;IAG7C;IACA,qBACE,KAACd;QACC0C,kDAAgD;QAChDC,aAAa;QACbC,cAAa;QACbX,SAASA;QACTY,oBAAM,KAACnC;YAAWG,OAAO;YAAIC,QAAQ;;;AAG3C"}

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

@@ -0,0 +1,71 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+function _templateObject() {
+    const data = _tagged_template_literal_loose([
+        "\n  h1.nextjs__container_errors_label {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: var(--size-gap-double) 0;\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-body footer {\n    margin-top: var(--size-gap);\n  }\n  .nextjs-container-errors-body footer p {\n    margin: 0;\n  }\n\n  .nextjs-container-errors-body small {\n    color: var(--color-font);\n  }\n"
+    ]);
+    _templateObject = function() {
+        return data;
+    };
+    return data;
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Dialog, DialogBody, DialogContent, DialogHeader } from '../components/Dialog';
+import { Overlay } from '../components/Overlay';
+import { Terminal } from '../components/Terminal';
+import { VersionStalenessInfo } from '../components/VersionStalenessInfo';
+import { noop as css } from '../helpers/noop-template';
+export const BuildError = function BuildError(param) {
+    let { message, versionInfo } = param;
+    const noop = React.useCallback(()=>{}, []);
+    return /*#__PURE__*/ _jsx(Overlay, {
+        fixed: true,
+        children: /*#__PURE__*/ _jsx(Dialog, {
+            type: "error",
+            "aria-labelledby": "nextjs__container_error_label",
+            "aria-describedby": "nextjs__container_error_desc",
+            onClose: noop,
+            children: /*#__PURE__*/ _jsxs(DialogContent, {
+                children: [
+                    /*#__PURE__*/ _jsxs(DialogHeader, {
+                        className: "nextjs-container-errors-header",
+                        children: [
+                            /*#__PURE__*/ _jsx("h1", {
+                                id: "nextjs__container_errors_label",
+                                className: "nextjs__container_errors_label",
+                                children: 'Build Error'
+                            }),
+                            /*#__PURE__*/ _jsx(VersionStalenessInfo, {
+                                versionInfo: versionInfo
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                id: "nextjs__container_errors_desc",
+                                className: "nextjs__container_errors_desc",
+                                children: "Failed to compile"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogBody, {
+                        className: "nextjs-container-errors-body",
+                        children: [
+                            /*#__PURE__*/ _jsx(Terminal, {
+                                content: message
+                            }),
+                            /*#__PURE__*/ _jsx("footer", {
+                                children: /*#__PURE__*/ _jsx("p", {
+                                    id: "nextjs__container_build_error_desc",
+                                    children: /*#__PURE__*/ _jsx("small", {
+                                        children: "This error occurred during the build process and can only be dismissed by fixing the error."
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+    });
+};
+export const styles = css(_templateObject());
+
+//# sourceMappingURL=BuildError.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/_experimental/internal/container/BuildError.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { VersionInfo } from '../../../../../../server/dev/parse-version-info'\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogHeader,\n} from '../components/Dialog'\nimport { Overlay } from '../components/Overlay'\nimport { Terminal } from '../components/Terminal'\nimport { VersionStalenessInfo } from '../components/VersionStalenessInfo'\nimport { noop as css } from '../helpers/noop-template'\n\nexport type BuildErrorProps = { message: string; versionInfo?: VersionInfo }\n\nexport const BuildError: React.FC<BuildErrorProps> = function BuildError({\n  message,\n  versionInfo,\n}) {\n  const noop = React.useCallback(() => {}, [])\n  return (\n    <Overlay fixed>\n      <Dialog\n        type=\"error\"\n        aria-labelledby=\"nextjs__container_error_label\"\n        aria-describedby=\"nextjs__container_error_desc\"\n        onClose={noop}\n      >\n        <DialogContent>\n          <DialogHeader className=\"nextjs-container-errors-header\">\n            <h1\n              id=\"nextjs__container_errors_label\"\n              className=\"nextjs__container_errors_label\"\n            >\n              {'Build Error'}\n            </h1>\n            <VersionStalenessInfo versionInfo={versionInfo} />\n            <p\n              id=\"nextjs__container_errors_desc\"\n              className=\"nextjs__container_errors_desc\"\n            >\n              Failed to compile\n            </p>\n          </DialogHeader>\n          <DialogBody className=\"nextjs-container-errors-body\">\n            <Terminal content={message} />\n            <footer>\n              <p id=\"nextjs__container_build_error_desc\">\n                <small>\n                  This error occurred during the build process and can only be\n                  dismissed by fixing the error.\n                </small>\n              </p>\n            </footer>\n          </DialogBody>\n        </DialogContent>\n      </Dialog>\n    </Overlay>\n  )\n}\n\nexport const styles = css`\n  h1.nextjs__container_errors_label {\n    font-size: var(--size-font-big);\n    line-height: var(--size-font-bigger);\n    font-weight: bold;\n    margin: var(--size-gap-double) 0;\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-body footer {\n    margin-top: var(--size-gap);\n  }\n  .nextjs-container-errors-body footer p {\n    margin: 0;\n  }\n\n  .nextjs-container-errors-body small {\n    color: var(--color-font);\n  }\n`\n"],"names":["React","Dialog","DialogBody","DialogContent","DialogHeader","Overlay","Terminal","VersionStalenessInfo","noop","css","BuildError","message","versionInfo","useCallback","fixed","type","aria-labelledby","aria-describedby","onClose","className","h1","id","p","content","footer","small","styles"],"mappings":";;;;;;;;;;;AAAA,YAAYA,WAAW,QAAO;AAE9B,SACEC,MAAM,EACNC,UAAU,EACVC,aAAa,EACbC,YAAY,QACP,uBAAsB;AAC7B,SAASC,OAAO,QAAQ,wBAAuB;AAC/C,SAASC,QAAQ,QAAQ,yBAAwB;AACjD,SAASC,oBAAoB,QAAQ,qCAAoC;AACzE,SAASC,QAAQC,GAAG,QAAQ,2BAA0B;AAItD,OAAO,MAAMC,aAAwC,SAASA,WAAW,KAGxE;IAHwE,IAAA,EACvEC,OAAO,EACPC,WAAW,EACZ,GAHwE;IAIvE,MAAMJ,OAAOR,MAAMa,WAAW,CAAC,KAAO,GAAG,EAAE;IAC3C,qBACE,KAACR;QAAQS,KAAK;kBACZ,cAAA,KAACb;YACCc,MAAK;YACLC,mBAAgB;YAChBC,oBAAiB;YACjBC,SAASV;sBAET,cAAA,MAACL;;kCACC,MAACC;wBAAae,WAAU;;0CACtB,KAACC;gCACCC,IAAG;gCACHF,WAAU;0CAET;;0CAEH,KAACZ;gCAAqBK,aAAaA;;0CACnC,KAACU;gCACCD,IAAG;gCACHF,WAAU;0CACX;;;;kCAIH,MAACjB;wBAAWiB,WAAU;;0CACpB,KAACb;gCAASiB,SAASZ;;0CACnB,KAACa;0CACC,cAAA,KAACF;oCAAED,IAAG;8CACJ,cAAA,KAACI;kDAAM;;;;;;;;;;AAWvB,EAAC;AAED,OAAO,MAAMC,SAASjB,uBAsBrB"}

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

@@ -0,0 +1,364 @@
+import { _ as _tagged_template_literal_loose } from "@swc/helpers/_/_tagged_template_literal_loose";
+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;
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { ACTION_UNHANDLED_ERROR, ACTION_UNHANDLED_REJECTION } from '../../../shared';
+import { Dialog, DialogBody, DialogContent, DialogHeader } from '../components/Dialog';
+import { LeftRightDialogHeader } from '../components/LeftRightDialogHeader';
+import { Overlay } from '../components/Overlay';
+import { Toast } from '../components/Toast';
+import { getErrorByType } from '../helpers/get-error-by-type';
+import { noop as css } from '../helpers/noop-template';
+import { CloseIcon } from '../icons/CloseIcon';
+import { RuntimeError } from './RuntimeError';
+import { VersionStalenessInfo } from '../components/VersionStalenessInfo';
+import { getErrorSource } from '../../../../../../shared/lib/error-source';
+import { HotlinkedText } from '../components/hot-linked-text';
+import { PseudoHtmlDiff } from './RuntimeError/component-stack-pseudo-html';
+import { getHydrationWarningType } from '../helpers/hydration-error-info';
+import { NodejsInspectorCopyButton } from '../components/nodejs-inspector';
+import { CopyButton } from '../components/copy-button';
+import { getUnhandledErrorType, isUnhandledConsoleOrRejection } from '../helpers/console-error';
+import { extractNextErrorCode } from '../../../../../../lib/error-telemetry-utils';
+function isNextjsLink(text) {
+    return text.startsWith('https://nextjs.org');
+}
+function ErrorDescription(param) {
+    let { error, hydrationWarning } = param;
+    const isUnhandledOrReplayError = isUnhandledConsoleOrRejection(error);
+    const unhandledErrorType = isUnhandledOrReplayError ? 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__*/ _jsxs(_Fragment, {
+        children: [
+            envPrefix,
+            title,
+            /*#__PURE__*/ _jsx(HotlinkedText, {
+                text: hydrationWarning || error.message,
+                matcher: isNextjsLink
+            })
+        ]
+    });
+}
+function getErrorSignature(ev) {
+    const { event } = ev;
+    switch(event.type){
+        case ACTION_UNHANDLED_ERROR:
+        case 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 '';
+}
+export function Errors(param) {
+    let { isAppDir, errors, initialDisplayState, versionInfo, hasStaticIndicator, debugInfo } = param;
+    var _activeError_componentStackFrames;
+    const [lookups, setLookups] = useState({});
+    const [readyErrors, nextError] = 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 = useMemo(()=>{
+        return readyErrors.length < 1 && Boolean(errors.length);
+    }, [
+        errors.length,
+        readyErrors.length
+    ]);
+    useEffect(()=>{
+        if (nextError == null) {
+            return;
+        }
+        let mounted = true;
+        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] = useState(initialDisplayState);
+    const [activeIdx, setActiveIndex] = useState(0);
+    const previous = useCallback(()=>setActiveIndex((v)=>Math.max(0, v - 1)), []);
+    const next = useCallback(()=>setActiveIndex((v)=>Math.max(0, Math.min(readyErrors.length - 1, v + 1))), [
+        readyErrors.length
+    ]);
+    const activeError = 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.
+    useEffect(()=>{
+        if (errors.length < 1) {
+            setLookups({});
+            setDisplayState('hidden');
+            setActiveIndex(0);
+        }
+    }, [
+        errors.length
+    ]);
+    const minimize = useCallback(()=>setDisplayState('minimized'), []);
+    const hide = useCallback(()=>setDisplayState('hidden'), []);
+    const fullscreen = 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__*/ _jsx(Overlay, {});
+    }
+    if (displayState === 'hidden') {
+        return null;
+    }
+    if (displayState === 'minimized') {
+        return /*#__PURE__*/ _jsx(Toast, {
+            "data-nextjs-toast": true,
+            className: "nextjs-toast-errors-parent" + (hasStaticIndicator ? ' nextjs-error-with-static' : ''),
+            onClick: fullscreen,
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "nextjs-toast-errors",
+                children: [
+                    /*#__PURE__*/ _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__*/ _jsx("circle", {
+                                cx: "12",
+                                cy: "12",
+                                r: "10"
+                            }),
+                            /*#__PURE__*/ _jsx("line", {
+                                x1: "12",
+                                y1: "8",
+                                x2: "12",
+                                y2: "12"
+                            }),
+                            /*#__PURE__*/ _jsx("line", {
+                                x1: "12",
+                                y1: "16",
+                                x2: "12.01",
+                                y2: "16"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            readyErrors.length,
+                            " issue",
+                            readyErrors.length > 1 ? 's' : ''
+                        ]
+                    }),
+                    /*#__PURE__*/ _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__*/ _jsx(CloseIcon, {})
+                    })
+                ]
+            })
+        });
+    }
+    const error = activeError.error;
+    const isServerError = [
+        'server',
+        'edge-server'
+    ].includes(getErrorSource(error) || '');
+    const isUnhandledError = isUnhandledConsoleOrRejection(error);
+    const errorDetails = error.details || {};
+    const notes = errorDetails.notes || '';
+    const [warningTemplate, serverContent, clientContent] = errorDetails.warning || [
+        null,
+        '',
+        ''
+    ];
+    const hydrationErrorType = 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__*/ _jsx(Overlay, {
+        children: /*#__PURE__*/ _jsx(Dialog, {
+            type: "error",
+            "aria-labelledby": "nextjs__container_errors_label",
+            "aria-describedby": "nextjs__container_errors_desc",
+            onClose: isServerError ? undefined : minimize,
+            children: /*#__PURE__*/ _jsxs(DialogContent, {
+                children: [
+                    /*#__PURE__*/ _jsxs(DialogHeader, {
+                        className: "nextjs-container-errors-header",
+                        children: [
+                            /*#__PURE__*/ _jsxs(LeftRightDialogHeader, {
+                                previous: activeIdx > 0 ? previous : null,
+                                next: activeIdx < readyErrors.length - 1 ? next : null,
+                                close: isServerError ? undefined : minimize,
+                                children: [
+                                    /*#__PURE__*/ _jsxs("small", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                children: activeIdx + 1
+                                            }),
+                                            " of",
+                                            ' ',
+                                            /*#__PURE__*/ _jsx("span", {
+                                                "data-nextjs-dialog-header-total-count": true,
+                                                children: readyErrors.length
+                                            }),
+                                            ' issue',
+                                            readyErrors.length < 2 ? '' : 's'
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(VersionStalenessInfo, {
+                                        versionInfo: versionInfo
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "nextjs__container_errors__error_title",
+                                "data-nextjs-error-code": extractNextErrorCode(error),
+                                children: [
+                                    /*#__PURE__*/ _jsx("h1", {
+                                        id: "nextjs__container_errors_label",
+                                        className: "nextjs__container_errors_label",
+                                        children: isServerError ? 'Server Error' : isUnhandledError ? 'Console Error' : 'Unhandled Runtime Error'
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(CopyButton, {
+                                                "data-nextjs-data-runtime-error-copy-stack": true,
+                                                actionLabel: "Copy error stack",
+                                                successLabel: "Copied",
+                                                content: error.stack || '',
+                                                disabled: !error.stack
+                                            }),
+                                            /*#__PURE__*/ _jsx(NodejsInspectorCopyButton, {
+                                                devtoolsFrontendUrl: debugInfo == null ? void 0 : debugInfo.devtoolsFrontendUrl
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                id: "nextjs__container_errors_desc",
+                                className: "nextjs__container_errors_desc",
+                                children: /*#__PURE__*/ _jsx(ErrorDescription, {
+                                    error: error,
+                                    hydrationWarning: hydrationWarning
+                                })
+                            }),
+                            notes ? /*#__PURE__*/ _jsx(_Fragment, {
+                                children: /*#__PURE__*/ _jsx("p", {
+                                    id: "nextjs__container_errors__notes",
+                                    className: "nextjs__container_errors__notes",
+                                    children: notes
+                                })
+                            }) : null,
+                            hydrationWarning ? /*#__PURE__*/ _jsx("p", {
+                                id: "nextjs__container_errors__link",
+                                className: "nextjs__container_errors__link",
+                                children: /*#__PURE__*/ _jsx(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__*/ _jsx(PseudoHtmlDiff, {
+                                className: "nextjs__container_errors__component-stack",
+                                hydrationMismatchType: hydrationErrorType,
+                                componentStackFrames: activeError.componentStackFrames || [],
+                                firstContent: serverContent,
+                                secondContent: clientContent,
+                                reactOutputComponentDiff: errorDetails.reactOutputComponentDiff
+                            }) : null,
+                            isServerError ? /*#__PURE__*/ _jsx("div", {
+                                children: /*#__PURE__*/ _jsx("small", {
+                                    children: "This error happened while generating the page. Any console logs will be displayed in the terminal window."
+                                })
+                            }) : undefined
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DialogBody, {
+                        className: "nextjs-container-errors-body",
+                        children: /*#__PURE__*/ _jsx(RuntimeError, {
+                            error: activeError
+                        }, activeError.id.toString())
+                    })
+                ]
+            })
+        })
+    });
+}
+export const styles = css(_templateObject());
+
+//# sourceMappingURL=Errors.js.map

package/dist/esm/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":["useState","useEffect","useMemo","useCallback","ACTION_UNHANDLED_ERROR","ACTION_UNHANDLED_REJECTION","Dialog","DialogBody","DialogContent","DialogHeader","LeftRightDialogHeader","Overlay","Toast","getErrorByType","noop","css","CloseIcon","RuntimeError","VersionStalenessInfo","getErrorSource","HotlinkedText","PseudoHtmlDiff","getHydrationWarningType","NodejsInspectorCopyButton","CopyButton","getUnhandledErrorType","isUnhandledConsoleOrRejection","extractNextErrorCode","isNextjsLink","text","startsWith","ErrorDescription","error","hydrationWarning","isUnhandledOrReplayError","unhandledErrorType","isConsoleErrorStringMessage","title","name","environmentName","envPrefix","message","matcher","getErrorSignature","ev","event","type","reason","stack","_","Errors","isAppDir","errors","initialDisplayState","versionInfo","hasStaticIndicator","debugInfo","activeError","lookups","setLookups","readyErrors","nextError","ready","next","idx","length","e","id","push","prev","isLoading","Boolean","mounted","then","resolved","m","displayState","setDisplayState","activeIdx","setActiveIndex","previous","v","Math","max","min","minimize","hide","fullscreen","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","isServerError","includes","isUnhandledError","errorDetails","details","notes","warningTemplate","serverContent","clientContent","warning","hydrationErrorType","replace","aria-labelledby","aria-describedby","onClose","undefined","close","small","data-nextjs-dialog-header-total-count","data-nextjs-error-code","h1","data-nextjs-data-runtime-error-copy-stack","actionLabel","successLabel","content","disabled","devtoolsFrontendUrl","p","componentStackFrames","reactOutputComponentDiff","hydrationMismatchType","firstContent","secondContent","toString","styles"],"mappings":"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"}