inital commit

This commit is contained in:
2026-01-01 15:25:19 +05:30
commit f0ae49465a
36361 changed files with 4894111 additions and 0 deletions

View File

@@ -0,0 +1,7 @@
import React from 'react';
import type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay';
export interface BuildErrorProps extends ErrorBaseProps {
message: string;
}
export declare const BuildError: React.FC<BuildErrorProps>;
export declare const styles = "";

View File

@@ -0,0 +1,74 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
BuildError: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
BuildError: function() {
return BuildError;
},
styles: function() {
return styles;
}
});
const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _jsxruntime = require("react/jsx-runtime");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _stripansi = /*#__PURE__*/ _interop_require_default._(require("next/dist/compiled/strip-ansi"));
const _terminal = require("../components/terminal");
const _erroroverlaylayout = require("../components/errors/error-overlay-layout/error-overlay-layout");
const getErrorTextFromBuildErrorMessage = (multiLineMessage)=>{
const lines = multiLineMessage.split('\n');
// The multi-line build error message looks like:
// <file path>:<line number>:<column number>
// <error message>
// <error code frame of compiler or bundler>
// e.g.
// ./path/to/file.js:1:1
// SyntaxError: ...
// > 1 | con st foo =
// ...
return (0, _stripansi.default)(lines[1] || '');
};
const BuildError = function BuildError(param) {
let { message, ...props } = param;
const noop = (0, _react.useCallback)(()=>{}, []);
const error = Object.defineProperty(new Error(message), "__NEXT_ERROR_CODE", {
value: "E394",
enumerable: false,
configurable: true
});
const formattedMessage = (0, _react.useMemo)(()=>getErrorTextFromBuildErrorMessage(message) || 'Failed to compile', [
message
]);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlaylayout.ErrorOverlayLayout, {
errorType: "Build Error",
errorMessage: formattedMessage,
onClose: noop,
error: error,
footerMessage: "This error occurred during the build process and can only be dismissed by fixing the error.",
...props,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_terminal.Terminal, {
content: message
})
});
};
const styles = "";
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=build-error.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/container/build-error.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react'\nimport stripAnsi from 'next/dist/compiled/strip-ansi'\nimport { Terminal } from '../components/terminal'\nimport { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay'\n\nexport interface BuildErrorProps extends ErrorBaseProps {\n message: string\n}\n\nconst getErrorTextFromBuildErrorMessage = (multiLineMessage: string) => {\n const lines = multiLineMessage.split('\\n')\n // The multi-line build error message looks like:\n // <file path>:<line number>:<column number>\n // <error message>\n // <error code frame of compiler or bundler>\n // e.g.\n // ./path/to/file.js:1:1\n // SyntaxError: ...\n // > 1 | con st foo =\n // ...\n return stripAnsi(lines[1] || '')\n}\n\nexport const BuildError: React.FC<BuildErrorProps> = function BuildError({\n message,\n ...props\n}) {\n const noop = useCallback(() => {}, [])\n const error = new Error(message)\n const formattedMessage = useMemo(\n () => getErrorTextFromBuildErrorMessage(message) || 'Failed to compile',\n [message]\n )\n\n return (\n <ErrorOverlayLayout\n errorType=\"Build Error\"\n errorMessage={formattedMessage}\n onClose={noop}\n error={error}\n footerMessage=\"This error occurred during the build process and can only be dismissed by fixing the error.\"\n {...props}\n >\n <Terminal content={message} />\n </ErrorOverlayLayout>\n )\n}\n\nexport const styles = ``\n"],"names":["BuildError","styles","getErrorTextFromBuildErrorMessage","multiLineMessage","lines","split","stripAnsi","message","props","noop","useCallback","error","Error","formattedMessage","useMemo","ErrorOverlayLayout","errorType","errorMessage","onClose","footerMessage","Terminal","content"],"mappings":";;;;;;;;;;;;;;;IAwBaA,UAAU;eAAVA;;IAyBAC,MAAM;eAANA;;;;;;iEAjD+B;oEACtB;0BACG;oCACU;AAOnC,MAAMC,oCAAoC,CAACC;IACzC,MAAMC,QAAQD,iBAAiBE,KAAK,CAAC;IACrC,iDAAiD;IACjD,4CAA4C;IAC5C,kBAAkB;IAClB,4CAA4C;IAC5C,OAAO;IACP,wBAAwB;IACxB,mBAAmB;IACnB,qBAAqB;IACrB,MAAM;IACN,OAAOC,IAAAA,kBAAS,EAACF,KAAK,CAAC,EAAE,IAAI;AAC/B;AAEO,MAAMJ,aAAwC,SAASA,WAAW,KAGxE;IAHwE,IAAA,EACvEO,OAAO,EACP,GAAGC,OACJ,GAHwE;IAIvE,MAAMC,OAAOC,IAAAA,kBAAW,EAAC,KAAO,GAAG,EAAE;IACrC,MAAMC,QAAQ,qBAAkB,CAAlB,IAAIC,MAAML,UAAV,qBAAA;eAAA;oBAAA;sBAAA;IAAiB;IAC/B,MAAMM,mBAAmBC,IAAAA,cAAO,EAC9B,IAAMZ,kCAAkCK,YAAY,qBACpD;QAACA;KAAQ;IAGX,qBACE,qBAACQ,sCAAkB;QACjBC,WAAU;QACVC,cAAcJ;QACdK,SAAST;QACTE,OAAOA;QACPQ,eAAc;QACb,GAAGX,KAAK;kBAET,cAAA,qBAACY,kBAAQ;YAACC,SAASd;;;AAGzB;AAEO,MAAMN,SAAU"}

View File

@@ -0,0 +1,10 @@
import type { DebugInfo } from '../../types';
import type { ReadyRuntimeError } from '../../utils/get-error-by-type';
import type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay';
export interface ErrorsProps extends ErrorBaseProps {
runtimeErrors: ReadyRuntimeError[];
debugInfo: DebugInfo;
onClose: () => void;
}
export declare function Errors({ runtimeErrors, debugInfo, onClose, ...props }: ErrorsProps): import("react/jsx-runtime").JSX.Element | null;
export declare const styles = "\n .nextjs-error-with-static {\n bottom: calc(16px * 4.5);\n }\n p.nextjs__container_errors__link {\n font-size: var(--size-14);\n }\n p.nextjs__container_errors__notes {\n color: var(--color-stack-notes);\n font-size: var(--size-14);\n line-height: 1.5;\n }\n .nextjs-container-errors-body > h2:not(:first-child) {\n margin-top: calc(16px + 8px);\n }\n .nextjs-container-errors-body > h2 {\n color: var(--color-title-color);\n margin-bottom: 8px;\n font-size: var(--size-20);\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: 8px;\n }\n .nextjs-toast-hide-button {\n margin-left: 24px;\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_inspect_copy_button {\n cursor: pointer;\n background: none;\n border: none;\n color: var(--color-ansi-bright-white);\n font-size: var(--size-24);\n padding: 0;\n margin: 0;\n margin-left: 8px;\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 margin-bottom: 14px;\n }\n .error-overlay-notes-container {\n margin: 8px 2px;\n }\n .error-overlay-notes-container p {\n white-space: pre-wrap;\n }\n";

View File

@@ -0,0 +1,184 @@
"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 _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _overlay = require("../components/overlay");
const _runtimeerror = require("./runtime-error");
const _errorsource = require("../../../../../shared/lib/error-source");
const _hotlinkedtext = require("../components/hot-linked-text");
const _componentstackpseudohtml = require("./runtime-error/component-stack-pseudo-html");
const _hydrationerrorinfo = require("../../../errors/hydration-error-info");
const _consoleerror = require("../../../errors/console-error");
const _errortelemetryutils = require("../../../../../lib/error-telemetry-utils");
const _erroroverlaylayout = require("../components/errors/error-overlay-layout/error-overlay-layout");
const _ishydrationerror = require("../../../is-hydration-error");
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 + ': ';
const environmentName = 'environmentName' in error ? error.environmentName : '';
const envPrefix = environmentName ? "[ " + environmentName + " ] " : '';
// The environment name will be displayed as a label, so remove it
// from the message (e.g. "[ Server ] hello world" -> "hello world").
let message = error.message;
if (message.startsWith(envPrefix)) {
message = message.slice(envPrefix.length);
}
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
title,
/*#__PURE__*/ (0, _jsxruntime.jsx)(_hotlinkedtext.HotlinkedText, {
text: hydrationWarning || message,
matcher: isNextjsLink
})
]
});
}
function Errors(param) {
let { runtimeErrors, debugInfo, onClose, ...props } = param;
var _activeError_componentStackFrames;
const dialogResizerRef = (0, _react.useRef)(null);
(0, _react.useEffect)(()=>{
// Close the error overlay when pressing escape
function handleKeyDown(event) {
if (event.key === 'Escape') {
onClose();
}
}
document.addEventListener('keydown', handleKeyDown);
return ()=>document.removeEventListener('keydown', handleKeyDown);
}, [
onClose
]);
const isLoading = (0, _react.useMemo)(()=>{
return runtimeErrors.length < 1;
}, [
runtimeErrors.length
]);
const [activeIdx, setActiveIndex] = (0, _react.useState)(0);
const activeError = (0, _react.useMemo)(()=>{
var _runtimeErrors_activeIdx;
return (_runtimeErrors_activeIdx = runtimeErrors[activeIdx]) != null ? _runtimeErrors_activeIdx : null;
}, [
activeIdx,
runtimeErrors
]);
if (isLoading) {
// TODO: better loading state
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_overlay.Overlay, {});
}
if (!activeError) {
return null;
}
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;
const errorCode = (0, _errortelemetryutils.extractNextErrorCode)(error);
const footerMessage = isServerError ? 'This error happened while generating the page. Any console logs will be displayed in the terminal window.' : undefined;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_erroroverlaylayout.ErrorOverlayLayout, {
errorCode: errorCode,
errorType: isServerError ? 'Runtime Error' : isUnhandledError ? 'Console Error' : 'Unhandled Runtime Error',
errorMessage: /*#__PURE__*/ (0, _jsxruntime.jsx)(ErrorDescription, {
error: error,
hydrationWarning: hydrationWarning
}),
onClose: isServerError ? undefined : onClose,
debugInfo: debugInfo,
error: error,
runtimeErrors: runtimeErrors,
activeIdx: activeIdx,
setActiveIndex: setActiveIndex,
footerMessage: footerMessage,
dialogResizerRef: dialogResizerRef,
...props,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
className: "error-overlay-notes-container",
children: [
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: " + _ishydrationerror.NEXTJS_HYDRATION_ERROR_LINK
})
}) : 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,
firstContent: serverContent,
secondContent: clientContent,
reactOutputComponentDiff: errorDetails.reactOutputComponentDiff || ''
}) : null,
/*#__PURE__*/ (0, _jsxruntime.jsx)(_react.Suspense, {
fallback: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
"data-nextjs-error-suspended": true
}),
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_runtimeerror.RuntimeError, {
error: activeError,
dialogResizerRef: dialogResizerRef
}, activeError.id.toString())
})
]
});
}
const styles = "\n .nextjs-error-with-static {\n bottom: calc(16px * 4.5);\n }\n p.nextjs__container_errors__link {\n font-size: var(--size-14);\n }\n p.nextjs__container_errors__notes {\n color: var(--color-stack-notes);\n font-size: var(--size-14);\n line-height: 1.5;\n }\n .nextjs-container-errors-body > h2:not(:first-child) {\n margin-top: calc(16px + 8px);\n }\n .nextjs-container-errors-body > h2 {\n color: var(--color-title-color);\n margin-bottom: 8px;\n font-size: var(--size-20);\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: 8px;\n }\n .nextjs-toast-hide-button {\n margin-left: 24px;\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_inspect_copy_button {\n cursor: pointer;\n background: none;\n border: none;\n color: var(--color-ansi-bright-white);\n font-size: var(--size-24);\n padding: 0;\n margin: 0;\n margin-left: 8px;\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 margin-bottom: 14px;\n }\n .error-overlay-notes-container {\n margin: 8px 2px;\n }\n .error-overlay-notes-container p {\n white-space: pre-wrap;\n }\n";
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

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,6 @@
import type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay';
interface RootLayoutMissingTagsErrorProps extends ErrorBaseProps {
missingTags: string[];
}
export declare function RootLayoutMissingTagsError({ missingTags, ...props }: RootLayoutMissingTagsErrorProps): import("react/jsx-runtime").JSX.Element;
export {};

View File

@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "RootLayoutMissingTagsError", {
enumerable: true,
get: function() {
return RootLayoutMissingTagsError;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _hotlinkedtext = require("../components/hot-linked-text");
const _erroroverlaylayout = require("../components/errors/error-overlay-layout/error-overlay-layout");
function RootLayoutMissingTagsError(param) {
let { missingTags, ...props } = param;
const noop = (0, _react.useCallback)(()=>{}, []);
const error = Object.defineProperty(new Error("The following tags are missing in the Root Layout: " + missingTags.map((tagName)=>"<" + tagName + ">").join(', ') + ".\nRead more at https://nextjs.org/docs/messages/missing-root-layout-tags"), "__NEXT_ERROR_CODE", {
value: "E638",
enumerable: false,
configurable: true
});
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_erroroverlaylayout.ErrorOverlayLayout, {
errorType: "Missing Required HTML Tag",
error: error,
errorMessage: /*#__PURE__*/ (0, _jsxruntime.jsx)(_hotlinkedtext.HotlinkedText, {
text: error.message
}),
onClose: noop,
...props
});
}
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=root-layout-missing-tags-error.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../src/client/components/react-dev-overlay/ui/container/root-layout-missing-tags-error.tsx"],"sourcesContent":["import { useCallback } from 'react'\nimport { HotlinkedText } from '../components/hot-linked-text'\nimport { ErrorOverlayLayout } from '../components/errors/error-overlay-layout/error-overlay-layout'\nimport type { ErrorBaseProps } from '../components/errors/error-overlay/error-overlay'\n\ninterface RootLayoutMissingTagsErrorProps extends ErrorBaseProps {\n missingTags: string[]\n}\n\nexport function RootLayoutMissingTagsError({\n missingTags,\n ...props\n}: RootLayoutMissingTagsErrorProps) {\n const noop = useCallback(() => {}, [])\n const error = new Error(\n `The following tags are missing in the Root Layout: ${missingTags\n .map((tagName) => `<${tagName}>`)\n .join(\n ', '\n )}.\\nRead more at https://nextjs.org/docs/messages/missing-root-layout-tags`\n )\n return (\n <ErrorOverlayLayout\n errorType=\"Missing Required HTML Tag\"\n error={error}\n errorMessage={<HotlinkedText text={error.message} />}\n onClose={noop}\n {...props}\n />\n )\n}\n"],"names":["RootLayoutMissingTagsError","missingTags","props","noop","useCallback","error","Error","map","tagName","join","ErrorOverlayLayout","errorType","errorMessage","HotlinkedText","text","message","onClose"],"mappings":";;;;+BASgBA;;;eAAAA;;;;uBATY;+BACE;oCACK;AAO5B,SAASA,2BAA2B,KAGT;IAHS,IAAA,EACzCC,WAAW,EACX,GAAGC,OAC6B,GAHS;IAIzC,MAAMC,OAAOC,IAAAA,kBAAW,EAAC,KAAO,GAAG,EAAE;IACrC,MAAMC,QAAQ,qBAMb,CANa,IAAIC,MAChB,AAAC,wDAAqDL,YACnDM,GAAG,CAAC,CAACC,UAAY,AAAC,MAAGA,UAAQ,KAC7BC,IAAI,CACH,QACA,8EALQ,qBAAA;eAAA;oBAAA;sBAAA;IAMd;IACA,qBACE,qBAACC,sCAAkB;QACjBC,WAAU;QACVN,OAAOA;QACPO,4BAAc,qBAACC,4BAAa;YAACC,MAAMT,MAAMU,OAAO;;QAChDC,SAASb;QACR,GAAGD,KAAK;;AAGf"}

View File

@@ -0,0 +1,2 @@
export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view';
export declare const PSEUDO_HTML_DIFF_STYLES = "\n [data-nextjs-container-errors-pseudo-html] {\n padding: 8px 0;\n margin: 8px 0;\n border: 1px solid var(--color-gray-400);\n background: var(--color-background-200);\n color: var(--color-syntax-constant);\n font-family: var(--font-stack-monospace);\n font-size: var(--size-12);\n line-height: 1.33em; /* 16px in 12px font size */\n border-radius: var(--rounded-md-2);\n }\n [data-nextjs-container-errors-pseudo-html-line] {\n display: inline-block;\n width: 100%;\n padding-left: 40px;\n line-height: calc(5 / 3);\n }\n [data-nextjs-container-errors-pseudo-html--diff='error'] {\n background: var(--color-amber-100);\n font-weight: bold;\n }\n [data-nextjs-container-errors-pseudo-html-collapse-button] {\n all: unset;\n margin-left: 12px;\n &:focus {\n outline: none;\n }\n }\n [data-nextjs-container-errors-pseudo-html--diff='add'] {\n background: var(--color-green-300);\n }\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n margin-left: calc(24px * -1);\n margin-right: 24px;\n }\n [data-nextjs-container-errors-pseudo-html--diff='add']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-green-900);\n }\n [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n background: var(--color-red-300);\n }\n [data-nextjs-container-errors-pseudo-html--diff='remove']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-red-900);\n margin-left: calc(24px * -1);\n margin-right: 24px;\n }\n [data-nextjs-container-errors-pseudo-html--diff='error']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-amber-900);\n }\n \n [data-nextjs-container-errors-pseudo-html--hint] {\n display: inline-block;\n font-size: 0;\n height: 0;\n }\n [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n color: var(--color-accents-1);\n }\n .nextjs__container_errors__component-stack {\n margin: 0;\n }\n [data-nextjs-container-errors-pseudo-html-collapse='true']\n .nextjs__container_errors__component-stack\n code {\n max-height: 120px;\n mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n padding-bottom: 40px;\n }\n .nextjs__container_errors__component-stack code {\n display: block;\n width: 100%;\n white-space: pre-wrap;\n scroll-snap-type: y mandatory;\n overflow-y: hidden;\n }\n [data-nextjs-container-errors-pseudo-html--diff] {\n scroll-snap-align: center;\n }\n .error-overlay-hydration-error-diff-plus-icon {\n color: var(--color-green-900);\n }\n .error-overlay-hydration-error-diff-minus-icon {\n color: var(--color-red-900);\n }\n";

View File

@@ -0,0 +1,32 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
PSEUDO_HTML_DIFF_STYLES: null,
PseudoHtmlDiff: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
PSEUDO_HTML_DIFF_STYLES: function() {
return PSEUDO_HTML_DIFF_STYLES;
},
PseudoHtmlDiff: function() {
return _diffview.PseudoHtmlDiff;
}
});
const _diffview = require("../../components/hydration-diff/diff-view");
const PSEUDO_HTML_DIFF_STYLES = "\n [data-nextjs-container-errors-pseudo-html] {\n padding: 8px 0;\n margin: 8px 0;\n border: 1px solid var(--color-gray-400);\n background: var(--color-background-200);\n color: var(--color-syntax-constant);\n font-family: var(--font-stack-monospace);\n font-size: var(--size-12);\n line-height: 1.33em; /* 16px in 12px font size */\n border-radius: var(--rounded-md-2);\n }\n [data-nextjs-container-errors-pseudo-html-line] {\n display: inline-block;\n width: 100%;\n padding-left: 40px;\n line-height: calc(5 / 3);\n }\n [data-nextjs-container-errors-pseudo-html--diff='error'] {\n background: var(--color-amber-100);\n font-weight: bold;\n }\n [data-nextjs-container-errors-pseudo-html-collapse-button] {\n all: unset;\n margin-left: 12px;\n &:focus {\n outline: none;\n }\n }\n [data-nextjs-container-errors-pseudo-html--diff='add'] {\n background: var(--color-green-300);\n }\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n margin-left: calc(24px * -1);\n margin-right: 24px;\n }\n [data-nextjs-container-errors-pseudo-html--diff='add']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-green-900);\n }\n [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n background: var(--color-red-300);\n }\n [data-nextjs-container-errors-pseudo-html--diff='remove']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-red-900);\n margin-left: calc(24px * -1);\n margin-right: 24px;\n }\n [data-nextjs-container-errors-pseudo-html--diff='error']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-amber-900);\n }\n \n [data-nextjs-container-errors-pseudo-html--hint] {\n display: inline-block;\n font-size: 0;\n height: 0;\n }\n [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n color: var(--color-accents-1);\n }\n .nextjs__container_errors__component-stack {\n margin: 0;\n }\n [data-nextjs-container-errors-pseudo-html-collapse='true']\n .nextjs__container_errors__component-stack\n code {\n max-height: 120px;\n mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n padding-bottom: 40px;\n }\n .nextjs__container_errors__component-stack code {\n display: block;\n width: 100%;\n white-space: pre-wrap;\n scroll-snap-type: y mandatory;\n overflow-y: hidden;\n }\n [data-nextjs-container-errors-pseudo-html--diff] {\n scroll-snap-align: center;\n }\n .error-overlay-hydration-error-diff-plus-icon {\n color: var(--color-green-900);\n }\n .error-overlay-hydration-error-diff-minus-icon {\n color: var(--color-red-900);\n }\n";
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=component-stack-pseudo-html.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/container/runtime-error/component-stack-pseudo-html.tsx"],"sourcesContent":["export { PseudoHtmlDiff } from '../../components/hydration-diff/diff-view'\n\nexport const PSEUDO_HTML_DIFF_STYLES = `\n [data-nextjs-container-errors-pseudo-html] {\n padding: 8px 0;\n margin: 8px 0;\n border: 1px solid var(--color-gray-400);\n background: var(--color-background-200);\n color: var(--color-syntax-constant);\n font-family: var(--font-stack-monospace);\n font-size: var(--size-12);\n line-height: 1.33em; /* 16px in 12px font size */\n border-radius: var(--rounded-md-2);\n }\n [data-nextjs-container-errors-pseudo-html-line] {\n display: inline-block;\n width: 100%;\n padding-left: 40px;\n line-height: calc(5 / 3);\n }\n [data-nextjs-container-errors-pseudo-html--diff='error'] {\n background: var(--color-amber-100);\n font-weight: bold;\n }\n [data-nextjs-container-errors-pseudo-html-collapse-button] {\n all: unset;\n margin-left: 12px;\n &:focus {\n outline: none;\n }\n }\n [data-nextjs-container-errors-pseudo-html--diff='add'] {\n background: var(--color-green-300);\n }\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n margin-left: calc(24px * -1);\n margin-right: 24px;\n }\n [data-nextjs-container-errors-pseudo-html--diff='add']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-green-900);\n }\n [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n background: var(--color-red-300);\n }\n [data-nextjs-container-errors-pseudo-html--diff='remove']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-red-900);\n margin-left: calc(24px * -1);\n margin-right: 24px;\n }\n [data-nextjs-container-errors-pseudo-html--diff='error']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-amber-900);\n }\n ${/* hide but text are still accessible in DOM */ ''}\n [data-nextjs-container-errors-pseudo-html--hint] {\n display: inline-block;\n font-size: 0;\n height: 0;\n }\n [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n color: var(--color-accents-1);\n }\n .nextjs__container_errors__component-stack {\n margin: 0;\n }\n [data-nextjs-container-errors-pseudo-html-collapse='true']\n .nextjs__container_errors__component-stack\n code {\n max-height: 120px;\n mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n padding-bottom: 40px;\n }\n .nextjs__container_errors__component-stack code {\n display: block;\n width: 100%;\n white-space: pre-wrap;\n scroll-snap-type: y mandatory;\n overflow-y: hidden;\n }\n [data-nextjs-container-errors-pseudo-html--diff] {\n scroll-snap-align: center;\n }\n .error-overlay-hydration-error-diff-plus-icon {\n color: var(--color-green-900);\n }\n .error-overlay-hydration-error-diff-minus-icon {\n color: var(--color-red-900);\n }\n`\n"],"names":["PSEUDO_HTML_DIFF_STYLES","PseudoHtmlDiff"],"mappings":";;;;;;;;;;;;;;;IAEaA,uBAAuB;eAAvBA;;IAFJC,cAAc;eAAdA,wBAAc;;;0BAAQ;AAExB,MAAMD,0BAA2B"}

View File

@@ -0,0 +1,7 @@
import { type ReadyRuntimeError } from '../../../utils/get-error-by-type';
export type RuntimeErrorProps = {
error: ReadyRuntimeError;
dialogResizerRef: React.RefObject<HTMLDivElement | null>;
};
export declare function RuntimeError({ error, dialogResizerRef }: RuntimeErrorProps): import("react/jsx-runtime").JSX.Element;
export declare const styles = "\n \n [data-nextjs-container-errors-pseudo-html] {\n padding: 8px 0;\n margin: 8px 0;\n border: 1px solid var(--color-gray-400);\n background: var(--color-background-200);\n color: var(--color-syntax-constant);\n font-family: var(--font-stack-monospace);\n font-size: var(--size-12);\n line-height: 1.33em; /* 16px in 12px font size */\n border-radius: var(--rounded-md-2);\n }\n [data-nextjs-container-errors-pseudo-html-line] {\n display: inline-block;\n width: 100%;\n padding-left: 40px;\n line-height: calc(5 / 3);\n }\n [data-nextjs-container-errors-pseudo-html--diff='error'] {\n background: var(--color-amber-100);\n font-weight: bold;\n }\n [data-nextjs-container-errors-pseudo-html-collapse-button] {\n all: unset;\n margin-left: 12px;\n &:focus {\n outline: none;\n }\n }\n [data-nextjs-container-errors-pseudo-html--diff='add'] {\n background: var(--color-green-300);\n }\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n margin-left: calc(24px * -1);\n margin-right: 24px;\n }\n [data-nextjs-container-errors-pseudo-html--diff='add']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-green-900);\n }\n [data-nextjs-container-errors-pseudo-html--diff='remove'] {\n background: var(--color-red-300);\n }\n [data-nextjs-container-errors-pseudo-html--diff='remove']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-red-900);\n margin-left: calc(24px * -1);\n margin-right: 24px;\n }\n [data-nextjs-container-errors-pseudo-html--diff='error']\n [data-nextjs-container-errors-pseudo-html-line-sign] {\n color: var(--color-amber-900);\n }\n \n [data-nextjs-container-errors-pseudo-html--hint] {\n display: inline-block;\n font-size: 0;\n height: 0;\n }\n [data-nextjs-container-errors-pseudo-html--tag-adjacent='false'] {\n color: var(--color-accents-1);\n }\n .nextjs__container_errors__component-stack {\n margin: 0;\n }\n [data-nextjs-container-errors-pseudo-html-collapse='true']\n .nextjs__container_errors__component-stack\n code {\n max-height: 120px;\n mask-image: linear-gradient(to bottom,rgba(0,0,0,0) 0%,black 10%);\n padding-bottom: 40px;\n }\n .nextjs__container_errors__component-stack code {\n display: block;\n width: 100%;\n white-space: pre-wrap;\n scroll-snap-type: y mandatory;\n overflow-y: hidden;\n }\n [data-nextjs-container-errors-pseudo-html--diff] {\n scroll-snap-align: center;\n }\n .error-overlay-hydration-error-diff-plus-icon {\n color: var(--color-green-900);\n }\n .error-overlay-hydration-error-diff-minus-icon {\n color: var(--color-red-900);\n }\n\n";

View File

@@ -0,0 +1,60 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
0 && (module.exports = {
RuntimeError: null,
styles: null
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
RuntimeError: function() {
return RuntimeError;
},
styles: function() {
return styles;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _codeframe = require("../../components/code-frame/code-frame");
const _callstack = require("../../components/errors/call-stack/call-stack");
const _componentstackpseudohtml = require("./component-stack-pseudo-html");
const _geterrorbytype = require("../../../utils/get-error-by-type");
function RuntimeError(param) {
let { error, dialogResizerRef } = param;
const frames = (0, _geterrorbytype.useFrames)(error);
const firstFrame = (0, _react.useMemo)(()=>{
const firstFirstPartyFrameIndex = frames.findIndex((entry)=>!entry.ignored && Boolean(entry.originalCodeFrame) && Boolean(entry.originalStackFrame));
var _frames_firstFirstPartyFrameIndex;
return (_frames_firstFirstPartyFrameIndex = frames[firstFirstPartyFrameIndex]) != null ? _frames_firstFirstPartyFrameIndex : null;
}, [
frames
]);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
firstFrame && /*#__PURE__*/ (0, _jsxruntime.jsx)(_codeframe.CodeFrame, {
stackFrame: firstFrame.originalStackFrame,
codeFrame: firstFrame.originalCodeFrame
}),
frames.length > 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_callstack.CallStack, {
dialogResizerRef: dialogResizerRef,
frames: frames
})
]
});
}
const styles = "\n " + _componentstackpseudohtml.PSEUDO_HTML_DIFF_STYLES + "\n";
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=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../../../../../../../src/client/components/react-dev-overlay/ui/container/runtime-error/index.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { CodeFrame } from '../../components/code-frame/code-frame'\nimport { CallStack } from '../../components/errors/call-stack/call-stack'\nimport { PSEUDO_HTML_DIFF_STYLES } from './component-stack-pseudo-html'\nimport {\n useFrames,\n type ReadyRuntimeError,\n} from '../../../utils/get-error-by-type'\n\nexport type RuntimeErrorProps = {\n error: ReadyRuntimeError\n dialogResizerRef: React.RefObject<HTMLDivElement | null>\n}\n\nexport function RuntimeError({ error, dialogResizerRef }: RuntimeErrorProps) {\n const frames = useFrames(error)\n\n const firstFrame = useMemo(() => {\n const firstFirstPartyFrameIndex = frames.findIndex(\n (entry) =>\n !entry.ignored &&\n Boolean(entry.originalCodeFrame) &&\n Boolean(entry.originalStackFrame)\n )\n\n return frames[firstFirstPartyFrameIndex] ?? null\n }, [frames])\n\n return (\n <>\n {firstFrame && (\n <CodeFrame\n stackFrame={firstFrame.originalStackFrame!}\n codeFrame={firstFrame.originalCodeFrame!}\n />\n )}\n\n {frames.length > 0 && (\n <CallStack dialogResizerRef={dialogResizerRef} frames={frames} />\n )}\n </>\n )\n}\n\nexport const styles = `\n ${PSEUDO_HTML_DIFF_STYLES}\n`\n"],"names":["RuntimeError","styles","error","dialogResizerRef","frames","useFrames","firstFrame","useMemo","firstFirstPartyFrameIndex","findIndex","entry","ignored","Boolean","originalCodeFrame","originalStackFrame","CodeFrame","stackFrame","codeFrame","length","CallStack","PSEUDO_HTML_DIFF_STYLES"],"mappings":";;;;;;;;;;;;;;;IAcgBA,YAAY;eAAZA;;IA8BHC,MAAM;eAANA;;;;uBA5CW;2BACE;2BACA;0CACc;gCAIjC;AAOA,SAASD,aAAa,KAA8C;IAA9C,IAAA,EAAEE,KAAK,EAAEC,gBAAgB,EAAqB,GAA9C;IAC3B,MAAMC,SAASC,IAAAA,yBAAS,EAACH;IAEzB,MAAMI,aAAaC,IAAAA,cAAO,EAAC;QACzB,MAAMC,4BAA4BJ,OAAOK,SAAS,CAChD,CAACC,QACC,CAACA,MAAMC,OAAO,IACdC,QAAQF,MAAMG,iBAAiB,KAC/BD,QAAQF,MAAMI,kBAAkB;YAG7BV;QAAP,OAAOA,CAAAA,oCAAAA,MAAM,CAACI,0BAA0B,YAAjCJ,oCAAqC;IAC9C,GAAG;QAACA;KAAO;IAEX,qBACE;;YACGE,4BACC,qBAACS,oBAAS;gBACRC,YAAYV,WAAWQ,kBAAkB;gBACzCG,WAAWX,WAAWO,iBAAiB;;YAI1CT,OAAOc,MAAM,GAAG,mBACf,qBAACC,oBAAS;gBAAChB,kBAAkBA;gBAAkBC,QAAQA;;;;AAI/D;AAEO,MAAMH,SAAS,AAAC,SACnBmB,iDAAuB,GAAC"}

View File

@@ -0,0 +1,16 @@
import type { OverlayState, UnhandledErrorAction, UnhandledRejectionAction } from '../../../shared';
import { type ReadyRuntimeError } from '../../../utils/get-error-by-type';
export type SupportedErrorEvent = {
id: number;
event: UnhandledErrorAction | UnhandledRejectionAction;
};
type Props = {
children: (params: {
runtimeErrors: ReadyRuntimeError[];
totalErrorCount: number;
}) => React.ReactNode;
state: OverlayState;
isAppDir: boolean;
};
export declare const RenderError: (props: Props) => import("react/jsx-runtime").JSX.Element;
export {};

View File

@@ -0,0 +1,118 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "RenderError", {
enumerable: true,
get: function() {
return RenderError;
}
});
const _jsxruntime = require("react/jsx-runtime");
const _react = require("react");
const _shared = require("../../../shared");
const _geterrorbytype = require("../../../utils/get-error-by-type");
function getErrorSignature(ev) {
const { event } = ev;
// eslint-disable-next-line default-case -- TypeScript checks this
switch(event.type){
case _shared.ACTION_UNHANDLED_ERROR:
case _shared.ACTION_UNHANDLED_REJECTION:
{
return event.reason.name + "::" + event.reason.message + "::" + event.reason.stack;
}
}
}
const RenderError = (props)=>{
var _state_rootLayoutMissingTags;
const { state } = props;
const isBuildError = !!((_state_rootLayoutMissingTags = state.rootLayoutMissingTags) == null ? void 0 : _state_rootLayoutMissingTags.length) || !!state.buildError;
if (isBuildError) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(RenderBuildError, {
...props
});
} else {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(RenderRuntimeError, {
...props
});
}
};
const RenderRuntimeError = (param)=>{
let { children, state, isAppDir } = param;
const { errors } = state;
const [lookups, setLookups] = (0, _react.useState)({});
const [runtimeErrors, 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
]);
(0, _react.useEffect)(()=>{
if (nextError == null) {
return;
}
let mounted = true;
(0, _geterrorbytype.getErrorByType)(nextError, isAppDir).then((resolved)=>{
if (mounted) {
// 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.
setLookups((m)=>({
...m,
[resolved.id]: resolved
}));
}
});
return ()=>{
mounted = false;
};
}, [
nextError,
isAppDir
]);
const totalErrorCount = runtimeErrors.length;
return children({
runtimeErrors,
totalErrorCount
});
};
const RenderBuildError = (param)=>{
let { children } = param;
return children({
runtimeErrors: [],
// Build errors and missing root layout tags persist until fixed,
// so we can set a fixed error count of 1
totalErrorCount: 1
});
};
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=render-error.js.map

File diff suppressed because one or more lines are too long