diff --git a/packages/gatsby/cache-dir/error-overlay-handler.js b/packages/gatsby/cache-dir/error-overlay-handler.js index cf9361d02e6e2..9b9fa3067365c 100644 --- a/packages/gatsby/cache-dir/error-overlay-handler.js +++ b/packages/gatsby/cache-dir/error-overlay-handler.js @@ -1,43 +1,25 @@ -const overlayPackage = require(`@pmmmwh/react-refresh-webpack-plugin/overlay`) - -const ErrorOverlay = { - showCompileError: overlayPackage.showCompileError, - clearCompileError: overlayPackage.clearCompileError, -} - const errorMap = {} -function flat(arr) { - return Array.prototype.flat ? arr.flat() : [].concat(...arr) -} - const handleErrorOverlay = () => { const errors = Object.values(errorMap) - let errorStringsToDisplay = [] + let errorsToDisplay = [] if (errors.length > 0) { - errorStringsToDisplay = flat(errors) - .map(error => { - if (typeof error === `string`) { - return error - } else if (typeof error === `object`) { - const errorStrBuilder = [error.text] - - if (error.filePath) { - errorStrBuilder.push(`File: ${error.filePath}`) - } - - return errorStrBuilder.join(`\n\n`) - } - - return null - }) - .filter(Boolean) + errorsToDisplay = errors.flatMap(e => e).filter(Boolean) } - if (errorStringsToDisplay.length > 0) { - ErrorOverlay.showCompileError(errorStringsToDisplay.join(`\n\n`)) + if (errorsToDisplay.length > 0) { + window._gatsbyEvents.push([ + `FAST_REFRESH`, + { + action: `SHOW_GRAPHQL_ERRORS`, + payload: errorsToDisplay, + }, + ]) } else { - ErrorOverlay.clearCompileError() + window._gatsbyEvents.push([ + `FAST_REFRESH`, + { action: `CLEAR_GRAPHQL_ERRORS` }, + ]) } } @@ -52,5 +34,3 @@ export const reportError = (errorID, error) => { } handleErrorOverlay() } - -export { errorMap } diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/components/accordion.js b/packages/gatsby/cache-dir/fast-refresh-overlay/components/accordion.js new file mode 100644 index 0000000000000..235fb0e96f49c --- /dev/null +++ b/packages/gatsby/cache-dir/fast-refresh-overlay/components/accordion.js @@ -0,0 +1,83 @@ +import * as React from "react" +import { useId } from "./use-id" +import * as keys from "../helpers/keys" +import { match } from "../helpers/match" + +function ChevronIcon() { + return ( + + ) +} + +export function Accordion({ children, ...rest }) { + return ( +
{cause}
- {file} -
-
- {decoded
- ? decoded.map((entry, index) => (
+export function CodeFrame({ decoded }) {
+ if (!decoded) {
+ return (
+
+
+
+ )
+ }
+
+ return (
+
+
+ {decoded.map((entry, index) => {
+ // Check if content is "Enter" and render other element that collapses
+ // Otherwise an empty line would be printed
+ if (
+ index === 0 &&
+ entry.content ===
+ `
+`
+ ) {
+ return (
+
+ )
+ }
+
+ const style = {
+ color: entry.fg ? `var(--color-${entry.fg})` : undefined,
+ ...(entry.decoration === `bold`
+ ? { fontWeight: 800 }
+ : entry.decoration === `italic`
+ ? { fontStyle: `italic` }
+ : undefined),
+ }
+
+ return (
{entry.content}
- ))
- : null}
-
-
-)
-
-export default CodeFrame
+ )
+ })}
+
+
+ )
+}
diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/components/error-boundary.js b/packages/gatsby/cache-dir/fast-refresh-overlay/components/error-boundary.js
index 16d154286136a..d3a1d54c8816e 100644
--- a/packages/gatsby/cache-dir/fast-refresh-overlay/components/error-boundary.js
+++ b/packages/gatsby/cache-dir/fast-refresh-overlay/components/error-boundary.js
@@ -1,23 +1,14 @@
-import React from "react"
+import * as React from "react"
-class ErrorBoundary extends React.Component {
- state = { hasError: false }
+export class ErrorBoundary extends React.Component {
+ state = { error: null }
componentDidCatch(error) {
- this.props.onError(error)
- }
-
- componentDidMount() {
- this.props.clearErrors()
- }
-
- static getDerivedStateFromError() {
- return { hasError: true }
+ this.setState({ error })
}
render() {
- return this.state.hasError ? null : this.props.children
+ // Without this check => possible infinite loop
+ return this.state.error && this.props.hasErrors ? null : this.props.children
}
}
-
-export default ErrorBoundary
diff --git a/packages/gatsby/cache-dir/fast-refresh-overlay/components/graphql-errors.js b/packages/gatsby/cache-dir/fast-refresh-overlay/components/graphql-errors.js
new file mode 100644
index 0000000000000..467f5439d4082
--- /dev/null
+++ b/packages/gatsby/cache-dir/fast-refresh-overlay/components/graphql-errors.js
@@ -0,0 +1,94 @@
+import * as React from "react"
+import { Body, Header, HeaderOpenClose, Overlay } from "./overlay"
+import { Accordion, AccordionItem } from "./accordion"
+import { openInEditor } from "../utils"
+
+function WrappedAccordionItem({ error, open }) {
+ const title =
+ error?.error?.message ||
+ error.context.sourceMessage ||
+ `Unknown GraphQL error`
+ const docsUrl = error?.docsUrl
+ const filePath = error?.filePath
+ const lineNumber = error?.location?.start?.line
+ const columnNumber = error?.location?.start?.column
+ let locString = ``
+ if (typeof lineNumber !== `undefined`) {
+ locString += `:${lineNumber}`
+ if (typeof columnNumber !== `undefined`) {
+ locString += `:${columnNumber}`
+ }
+ }
+
+ return (
+
+ {error.text}
+
+ {docsUrl && (
+ + {hasMultipleErrors ? `Multiple` : `One`} unhandled GraphQL{` `} + {hasMultipleErrors ? `errors` : `error`} found in your files. See the + list below to fix {hasMultipleErrors ? `them` : `it`}: +
+Unhandled Runtime Error
- {moduleId} -- Error in function {functionName} -
-{error.error.message}
-{error.message}
++ {hasMultipleErrors ? `Multiple` : `One`} unhandled runtime{` `} + {hasMultipleErrors ? `errors` : `error`} found in your files. See the + list below to fix {hasMultipleErrors ? `them` : `it`}: +
+content
' + }, +} + +// elements with display:flex are focusable in IE10-11 +var focusFlexboxContainer = { + element: 'span', + mutate: function mutate(element) { + element.setAttribute( + 'style', + 'display: -webkit-flex; display: -ms-flexbox; display: flex;' + ) + element.innerHTML = 'hello' + }, +} + +// form[tabindex=0][disabled] should be focusable as the +// specification doesn't know the disabled attribute on the form element +// @specification https://www.w3.org/TR/html5/forms.html#the-form-element +var focusFormDisabled = { + element: 'form', + mutate: function mutate(element) { + element.setAttribute('tabindex', 0) + element.setAttribute('disabled', 'disabled') + }, +} + +// NOTE: https://github.com/medialize/ally.js/issues/35 +// fixes https://github.com/medialize/ally.js/issues/20 +// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-ismap +var focusImgIsmap = { + element: 'a', + mutate: function mutate(element) { + element.href = '#void' + element.innerHTML = '