Next.js on iOS: Failed to execute 'insertBefore' on 'Node'; NotFoundError insertBefore([native code]) The object can not be found here

Question

I wanted to share this error (and a fix), as I spent weeks searching for an answer to this problem that only affected our iOS Mobile users (and a sprinkling of Android users)

This error is also throwing devastating 500 Application errors on our Nextjs app for our users. Has anybody else observed a similar issue in Next.js?

Nextjs Versions:

Next.js 12 (w/ React +17) and Next.js 13 (w/ React 18)

Partial Error Stacktraces via Sentry:

NotFoundError: The object can not be found here.
  at insertBefore([native code])
  at e(/_next/static/chunks/framework-847cdbe141f8ae13.js:9:89722)
  ...

and

NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before the new node is to be inserted is not a child of this node.
  at e(/_next/static/chunks/framework-847cdbe141f8ae13.js:9:89710)
  ...

Browser Versions

This error would trigger a devastating 500 error in our Next.js app and according to our Sentry logs only affected iOS users v15 > and some Android (v12 & v13) users on Android Chrome:

Observed Error Triggers to reproduce (mobile only)

1. Fast navigation to the Nextjs app
2. Navigating to the Nextjs app from a third-party source (ie social media or google search links)
3. Having a stale tab or browser open and navigating back to the browser and tab

Answer 1

Fix

Our initial fix was to upgrade to Next.js 13 and React 18 which saw a noticeable reduction in errors observed in Sentry. However, this didn't completely fix the error. We also tried a fix that suggested disabling disable Google Translate in _app.js , which also didn't work.

We also created a custom _error.js page with a button to reload the page as one of the workarounds was to refresh the page the user was on.

The ultimate fix was that our top-level layout in our layout.js app root node had a React fragment (which should be supported as a fragment creates a node) but Next.js sees it as 4 root nodes (or with no single root node):

_app.js

<Layout>
    <ErrorBoundary>
        <Component {...pageProps} />
    </ErrorBoundary>
</Layout> 

Layout.js

 <> <!-- should be component root node? --->           
    <Header /> <!--- root node --->

    <main> <!--- root node --->
        <Breadcrumb />
        {children}
     </main>
            
     <NewsletterSignup /> <!--- root node --->

     <Footer /> <!--- root node --->
</>

This fix was to wrap our Layout in a single DOM node:

Layout.js

<div> <!--- root node --->           
    <Header /> 

    <main>
        <Breadcrumb />
        {children}
     </main>
            
     <NewsletterSignup /> 

     <Footer/>
</div>