RangeError: Maximum Call Stack size exceeded and App crashes

[ajayns]

Error:

I configured a basic version of AniLink for testing transitions and that itself seems to be crashing with the following error:

Uncaught RangeError: Maximum call stack size exceeded
    at getOwnPropertyDescriptor (<anonymous>)
    at isRegex (index.js:32)
    at objEquiv (index.js:63)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)
    at objEquiv (index.js:106)
    at deepEqual (index.js:32)

The above error occurred in the <HelmetWrapper> component:
    in HelmetWrapper (at SEO.js:22)
    in SEO (at Layout.js:14)
    in ThemeProvider (at Layout.js:12)
    in Layout (at pages/index.js:12)
    in IndexPage (created by HotExportedIndexPage)
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in div (at TransitionRenderer.js:49)
    in TransitionRenderer (at TransitionHandler.js:124)
    in Transition (at delayTransitionRender.js:30)
    in DelayedTransitionWrapper (at TransitionHandler.js:46)
    in TransitionGroup (at TransitionHandler.js:45)
    in div (at TransitionHandler.js:44)
    in Location (at TransitionHandler.js:42)
    in TransitionHandler (at wrap-page.js:9)
    in LayoutComponent (at wrap-page.js:8)
    in Wrapper (at gatsby-browser.js:13)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:64)
    in RouteUpdates (at root.js:63)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in InternalProvider (at wrap-root.js:5)
    in StaticQueryStore (at root.js:133)
    in _default (at app.js:67)

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

The above error occurred in the <AppContainer> component:
    in AppContainer (created by HotExportedIndexPage)
    in HotExportedIndexPage (created by PageRenderer)
    in div (at TransitionRenderer.js:49)
    in TransitionRenderer (at TransitionHandler.js:124)
    in Transition (at delayTransitionRender.js:30)
    in DelayedTransitionWrapper (at TransitionHandler.js:46)
    in TransitionGroup (at TransitionHandler.js:45)
    in div (at TransitionHandler.js:44)
    in Location (at TransitionHandler.js:42)
    in TransitionHandler (at wrap-page.js:9)
    in LayoutComponent (at wrap-page.js:8)
    in Wrapper (at gatsby-browser.js:13)
    in PageRenderer (at query-result-store.js:86)
    in PageQueryStore (at root.js:51)
    in RouteHandler (at root.js:73)
    in div (created by FocusHandlerImpl)
    in FocusHandlerImpl (created by Context.Consumer)
    in FocusHandler (created by RouterImpl)
    in RouterImpl (created by Context.Consumer)
    in Location (created by Context.Consumer)
    in Router (created by EnsureResources)
    in ScrollContext (at root.js:64)
    in RouteUpdates (at root.js:63)
    in EnsureResources (at root.js:61)
    in LocationHandler (at root.js:119)
    in LocationProvider (created by Context.Consumer)
    in Location (at root.js:118)
    in Root (at root.js:126)
    in InternalProvider (at wrap-root.js:5)
    in StaticQueryStore (at root.js:133)
    in _default (at app.js:67)

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

All of the above errors occur on repeat.

My config:

My transition link looks like:

<AniLink fade to={url}>
  Go to page
</AniLink>

Additional dependencies and packages used: styled-components locomotive-scroll

[ajayns]

It seems to be a problem with react-helmet and gatsby that was occurring during the transition, unfortunately. Closing the issue.

[TylerBarnes]

🤔 interesting! Do you know if this was happening with the regular Gatsby Link as well? Might be something we have to fix in Gatsby core if so!

[ajayns]

I think it was some issue within Gatsby itself and googling it, I found a couple of similar issues which suggested yarn upgrade, and well that did the job: I just upgraded gatsby and react-helmet. From the looks of it, it seems like something to do with deepEqual in react-helmet fixed in the latest version.