Dev Overlay error on Safari, Firefox (non v8 browsers) #36362

Nosferatu31 · 2022-08-10T18:35:41Z

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Firefox presents a blank screen when trying to render the overlay showing errors in the development stage.

However, Chrome is able to present it correctly

Reproduction Link

https://github.com/Nosferatu31/gatsby-bug-repro

Steps to Reproduce

npm i
gatsby develop
Accessing the site with Firefox and Chrome

Expected Result

Firefox:
- Shows page with modal displaying information about the error
Chrome:
- Shows page with modal displaying information about the error

Actual Result

Firefox:
- Console shows Warning: Cannot update a component (DevOverlay) while rendering a different component (WrappedAccordionItem)... error
- Console shows The above error occurred in the <WrappedAccordionItem> component: WrappedAccordionItem@webpack-internal:///./.cache/fast-refresh-overlay/components/runtime-errors.js:35:15... error
Chrome:
- Shows page with modal displaying information about the error

Environment

System:
    OS: Windows 10 10.0.19043 Build 19043
    CPU: Intel(R) Core(TM) i7-2600 CPU @ 3.40GHz, 3401 Mhz, 4 Core(s), 8 Logical Processor(s)
  Binaries:
    Node: 16.16.0 - c:\Program Files\nodejs\node.exe
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.ps1
    npm: 8.16.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Firefox: 103.0.1 (64-bit)
    Chrome: 103.0.5060.134 (64-bit)
  npmPackages:
    gatsby: 4.20.0
    gatsby-plugin-emotion: 7.20.0
    gatsby-plugin-google-tagmanager: 4.20.0
    gatsby-plugin-image: 2.20.0
    gatsby-plugin-manifest: 4.20.0
    gatsby-plugin-mixpanel: 3.7.0
    gatsby-plugin-netlify: 5.0.1
    gatsby-plugin-offline: 5.20.0
    gatsby-plugin-purgecss: 6.1.2
    gatsby-plugin-react-helmet: 5.20.0
    gatsby-plugin-remove-trailing-slashes: 4.19.0
    gatsby-plugin-sharp: 4.20.0
    gatsby-plugin-sitemap: 5.20.0
    gatsby-source-cosmicjs: 1.2.1
    gatsby-source-filesystem: 4.20.0
    gatsby-transformer-sharp: 4.20.0
  npmGlobalPackages:
    gatsby-cli: 4.20.0

Config Flags

DEV_SSR: false

The text was updated successfully, but these errors were encountered:

tyhopp · 2022-08-12T03:34:18Z

Hi @Nosferatu31, we published this in gatsby@4.22.0-next.1. Feel free to install this version if you're interested to try it out now, otherwise it will land in the next stable release.

marianhlavac · 2023-02-06T11:19:48Z

This issue is still present in gatsby v5.5.0.

Reproducible by:

Creating new Gatsby project via npm init gatsby
Altering index.tsx file (or any other) so it contains an runtime error (errors at build time are not affected)
Open site in Safari and Chrome – Safari (16.2) shows blank page, while Chrome (109.0.5414.87) does not and displays the issue correctly.

[Error] Warning: Cannot update a component (`DevOverlay`) while rendering a different component (`WrappedAccordionItem`).

Console contents

[Error] ReferenceError: Can't find variable: bufet
	(anonymous function) (index.modern.mjs:196)
	renderWithHooks (react-dom.development.js:16305)
	mountIndeterminateComponent (react-dom.development.js:20069)
	callCallback (react-dom.development.js:4164)
	dispatchEvent
	invokeGuardedCallbackDev (react-dom.development.js:4213)
	invokeGuardedCallback (react-dom.development.js:4277)
	beginWork$1 (react-dom.development.js:27446)
	performUnitOfWork (react-dom.development.js:26552)
	workLoopSync (react-dom.development.js:26461)
	renderRootSync (react-dom.development.js:26429)
	performSyncWorkOnRoot (react-dom.development.js:26080)
	performSyncWorkOnRoot
	flushSyncCallbacks (react-dom.development.js:12042)
	commitRootImpl (react-dom.development.js:26954)
	commitRoot (react-dom.development.js:26677)
	finishConcurrentRender (react-dom.development.js:25887)
	performConcurrentWorkOnRoot (react-dom.development.js:25804)
	performConcurrentWorkOnRoot
	workLoop (scheduler.development.js:266)
	flushWork (scheduler.development.js:239)
	performWorkUntilDeadline (scheduler.development.js:533)
[Error] ReferenceError: Can't find variable: bufet
	(anonymous function) (index.modern.mjs:196)
	renderWithHooks (react-dom.development.js:16305)
	mountIndeterminateComponent (react-dom.development.js:20069)
	callCallback (react-dom.development.js:4164)
	dispatchEvent
	invokeGuardedCallbackDev (react-dom.development.js:4213)
	invokeGuardedCallback (react-dom.development.js:4277)
	beginWork$1 (react-dom.development.js:27446)
	performUnitOfWork (react-dom.development.js:26552)
	workLoopSync (react-dom.development.js:26461)
	renderRootSync (react-dom.development.js:26429)
	recoverFromConcurrentError (react-dom.development.js:25845)
	performSyncWorkOnRoot (react-dom.development.js:26091)
	performSyncWorkOnRoot
	flushSyncCallbacks (react-dom.development.js:12042)
	commitRootImpl (react-dom.development.js:26954)
	commitRoot (react-dom.development.js:26677)
	finishConcurrentRender (react-dom.development.js:25887)
	performConcurrentWorkOnRoot (react-dom.development.js:25804)
	performConcurrentWorkOnRoot
	workLoop (scheduler.development.js:266)
	flushWork (scheduler.development.js:239)
	performWorkUntilDeadline (scheduler.development.js:533)
[Error] The above error occurred in one of your React components:
Component@

ReactUseErrorBoundaryContext

WithErrorBoundary()

G

Root

Component@

Component@

Component@

DevOverlay

RootWrappedWithOverlayAndProvider

App
React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.

error

logCapturedError (react-dom.development.js:18687)

callback (react-dom.development.js:18750)

callCallback (react-dom.development.js:13923)

commitUpdateQueue (react-dom.development.js:13944)

commitLayoutEffectOnFiber (react-dom.development.js:23359)

commitLayoutMountEffects_complete (react-dom.development.js:24683)

commitLayoutEffects_begin (react-dom.development.js:24669)

commitLayoutEffects (react-dom.development.js:24607)

commitRootImpl (react-dom.development.js:26818)

commitRoot (react-dom.development.js:26677)

performSyncWorkOnRoot (react-dom.development.js:26112)

performSyncWorkOnRoot

flushSyncCallbacks (react-dom.development.js:12042)

commitRootImpl (react-dom.development.js:26954)

commitRoot (react-dom.development.js:26677)

finishConcurrentRender (react-dom.development.js:25887)

performConcurrentWorkOnRoot (react-dom.development.js:25804)

performConcurrentWorkOnRoot

workLoop (scheduler.development.js:266)

flushWork (scheduler.development.js:239)

performWorkUntilDeadline (scheduler.development.js:533)

[Error] Warning: Cannot update a component (DevOverlay) while rendering a different component (WrappedAccordionItem). To locate the bad setState() call inside WrappedAccordionItem, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

WrappedAccordionItem

ul

Accordion

div

Body

div

div

Overlay

RuntimeErrors

ErrorComponent

ShadowPortal

DevOverlay

RootWrappedWithOverlayAndProvider

App

error

printWarning (react-dom.development.js:86)

error (react-dom.development.js:60)

warnAboutRenderPhaseUpdatesInDEV (react-dom.development.js:27487)

scheduleUpdateOnFiber (react-dom.development.js:25493)

dispatchReducerAction (react-dom.development.js:17452)

dispatchReducerAction

push (index.js:128)

handleRuntimeError (fast-refresh-module.js:47)

handleError (ErrorOverlayEntry.js:91)

errorHandler (errorEventHandlers.js:23)

dispatchEvent

invokeGuardedCallbackDev (react-dom.development.js:4213)

invokeGuardedCallback (react-dom.development.js:4277)

beginWork$1 (react-dom.development.js:27446)

performUnitOfWork (react-dom.development.js:26552)

workLoopSync (react-dom.development.js:26461)

renderRootSync (react-dom.development.js:26429)

performSyncWorkOnRoot (react-dom.development.js:26080)

performSyncWorkOnRoot

flushSyncCallbacks (react-dom.development.js:12042)

commitRootImpl (react-dom.development.js:26954)

commitRoot (react-dom.development.js:26677)

finishConcurrentRender (react-dom.development.js:25887)

performConcurrentWorkOnRoot (react-dom.development.js:25804)

performConcurrentWorkOnRoot

workLoop (scheduler.development.js:266)

flushWork (scheduler.development.js:239)

performWorkUntilDeadline (scheduler.development.js:533)

[Error] TypeError: undefined is not an object (evaluating 'modulePath.replace')

WrappedAccordionItem (runtime-errors.js:54)

renderWithHooks (react-dom.development.js:16305)

mountIndeterminateComponent (react-dom.development.js:20069)

callCallback (react-dom.development.js:4164)

dispatchEvent

invokeGuardedCallbackDev (react-dom.development.js:4213)

invokeGuardedCallback (react-dom.development.js:4277)

beginWork$1 (react-dom.development.js:27446)

performUnitOfWork (react-dom.development.js:26552)

workLoopSync (react-dom.development.js:26461)

renderRootSync (react-dom.development.js:26429)

performSyncWorkOnRoot (react-dom.development.js:26080)

performSyncWorkOnRoot

flushSyncCallbacks (react-dom.development.js:12042)

commitRootImpl (react-dom.development.js:26954)

commitRoot (react-dom.development.js:26677)

finishConcurrentRender (react-dom.development.js:25887)

performConcurrentWorkOnRoot (react-dom.development.js:25804)

performConcurrentWorkOnRoot

workLoop (scheduler.development.js:266)

flushWork (scheduler.development.js:239)

performWorkUntilDeadline (scheduler.development.js:533)

[Error] TypeError: undefined is not an object (evaluating 'modulePath.replace')

WrappedAccordionItem (runtime-errors.js:54)

renderWithHooks (react-dom.development.js:16305)

mountIndeterminateComponent (react-dom.development.js:20069)

callCallback (react-dom.development.js:4164)

dispatchEvent

invokeGuardedCallbackDev (react-dom.development.js:4213)

invokeGuardedCallback (react-dom.development.js:4277)

beginWork$1 (react-dom.development.js:27446)

performUnitOfWork (react-dom.development.js:26552)

workLoopSync (react-dom.development.js:26461)

renderRootSync (react-dom.development.js:26429)

recoverFromConcurrentError (react-dom.development.js:25845)

performSyncWorkOnRoot (react-dom.development.js:26091)

performSyncWorkOnRoot

flushSyncCallbacks (react-dom.development.js:12042)

commitRootImpl (react-dom.development.js:26954)

commitRoot (react-dom.development.js:26677)

finishConcurrentRender (react-dom.development.js:25887)

performConcurrentWorkOnRoot (react-dom.development.js:25804)

performConcurrentWorkOnRoot

workLoop (scheduler.development.js:266)

flushWork (scheduler.development.js:239)

performWorkUntilDeadline (scheduler.development.js:533)

[Error] The above error occurred in the  component:
WrappedAccordionItem

ul

Accordion

div

Body

div

div

Overlay

RuntimeErrors

ErrorComponent

ShadowPortal

DevOverlay

RootWrappedWithOverlayAndProvider

App
Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

error

logCapturedError (react-dom.development.js:18687)

(anonymous function) (react-dom.development.js:18715)

callCallback (react-dom.development.js:13923)

commitUpdateQueue (react-dom.development.js:13944)

commitLayoutEffectOnFiber (react-dom.development.js:23386)

commitLayoutMountEffects_complete (react-dom.development.js:24683)

commitLayoutEffects_begin (react-dom.development.js:24669)

commitLayoutEffects (react-dom.development.js:24607)

commitRootImpl (react-dom.development.js:26818)

commitRoot (react-dom.development.js:26677)

performSyncWorkOnRoot (react-dom.development.js:26112)

performSyncWorkOnRoot

flushSyncCallbacks (react-dom.development.js:12042)

commitRootImpl (react-dom.development.js:26954)

commitRoot (react-dom.development.js:26677)

finishConcurrentRender (react-dom.development.js:25887)

performConcurrentWorkOnRoot (react-dom.development.js:25804)

performConcurrentWorkOnRoot

workLoop (scheduler.development.js:266)

flushWork (scheduler.development.js:239)

performWorkUntilDeadline (scheduler.development.js:533)

[Error] TypeError: undefined is not an object (evaluating 'modulePath.replace')

flushSyncCallbacks (react-dom.development.js:54)

commitRootImpl (react-dom.development.js:26954)

commitRoot (react-dom.development.js:26677)

finishConcurrentRender (react-dom.development.js:25887)

performConcurrentWorkOnRoot (react-dom.development.js:25804)

performConcurrentWorkOnRoot

workLoop (scheduler.development.js:266)

flushWork (scheduler.development.js:239)

performWorkUntilDeadline (scheduler.development.js:533)

I'd like to ask for reopening this issue, as it seems not solved. Alternatively I can create a new issue, but it seems related.

Stesm · 2023-08-04T11:26:53Z

Issue present in Gatsby 5.10.0 on safari 16.5 (18615.2.9.11.4)

pauls-akmentins · 2023-08-21T15:03:11Z

Experiencing the same on gastby@4.7.2 and latest Safari.

Any tips how can I atleast omit these errors and proceed with showing the contents of page except showing blank page in development mode?

marijoo · 2024-04-12T08:24:00Z

Same here – Safari Version 17.4.1 (19618.1.15.11.14) and gatsby@5.13.3

Nosferatu31 added the type: bug An issue or pull request relating to a bug in Gatsby label Aug 10, 2022

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Aug 10, 2022

tyhopp added status: confirmed Issue with steps to reproduce the bug that’s been verified by at least one reviewer. and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Aug 11, 2022

tyhopp changed the title ~~Dev Overlay error on Firefox~~ Dev Overlay error on Safari, Firefox (non v8 browsers) Aug 11, 2022

tyhopp mentioned this issue Aug 11, 2022

fix(gatsby): Make runtime error overlay work in non-v8 browsers #36365

Merged

LekoArts closed this as completed in #36365 Aug 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dev Overlay error on Safari, Firefox (non v8 browsers) #36362

Dev Overlay error on Safari, Firefox (non v8 browsers) #36362

Nosferatu31 commented Aug 10, 2022

tyhopp commented Aug 12, 2022

marianhlavac commented Feb 6, 2023 •

edited

Loading

Stesm commented Aug 4, 2023

pauls-akmentins commented Aug 21, 2023

marijoo commented Apr 12, 2024

Dev Overlay error on Safari, Firefox (non v8 browsers) #36362

Dev Overlay error on Safari, Firefox (non v8 browsers) #36362

Comments

Nosferatu31 commented Aug 10, 2022

Preliminary Checks

Description

Reproduction Link

Steps to Reproduce

Expected Result

Actual Result

Environment

Config Flags

tyhopp commented Aug 12, 2022

marianhlavac commented Feb 6, 2023 • edited Loading

Stesm commented Aug 4, 2023

pauls-akmentins commented Aug 21, 2023

marijoo commented Apr 12, 2024

marianhlavac commented Feb 6, 2023 •

edited

Loading