Getting React/Gatsby hydration errors on Netlify

Support
1

Please take a look at
https://discipledchurch-prd.netlify.app/article/2022-04-10/confidence-in-finding-acceptance-a-reflection-on-psalm-19-14.

There is a script (<script src="https://static.esvmedia.org/crossref/crossref.min.js" type="text/javascript"></script> ) that runs after the page has rendered. The script finds references to Bible verses and then inserts a div popup to show a verse tooltip when the mouse hovers over.

If I run gatsby build or gatsby develop locally, or if I don’t the build’s zip file and open the file, there are no problems. The verses are highlighted correctly, and there are no errors.

However, while accessing the site as it’s hosted on Netlify, I get the three errors in the console:

  1. Starts with the error: Text content does not match server-rendered HTML.
  2. For every verse reference it finds, I get the error: Hydration failed because the initial UI does not match what was rendered on the server.
  3. Then, it ends with the error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

From what I can tell from the web, maybe there’s a broken tag? But the page renders fine when built locally or downloaded, and there are no errors.

Also, if you go here: https://discipledchurch-prd.netlify.app/devotional/2022-10-27/faith-over-might you’ll see that the attribute is quickly applied, then removed and a bunch of errors.

I’m stumped (and a bit frustrated at this point).

2

If you’re talking about these tooltips:

image
image1030×506 59.9 KB

They appear to work fine and I don’t see any errors. Has something changed?

3

Yeah, I added a setInterval to check for page changes after the hydration (using react-hydration-provider) completes.

Notice in the code below that

  1. prior to hydration, I use the esv-crossref-ignore class on the entire page (therefore, the javascript ignores the whole page and won’t throw errors).
  2. I have an interval that checks to see if the div class="loading" is still present. Once it is no longer found (hydration is complete), an event is dispatched that triggers the crossref script to scan the page a second time and update it.
  3. And, the page still populates with content for the initial delivery so that it’s “crawlable” by search engines and social media sites.

Essentially, the crossref script is running twice (once prior to hydration, and again after hydration).

Is there a better way to do this (again, I’m new to React and Gatsby)?

gatsby-ssr.ts

const PostBodyComponents = [
    <script src="https://static.esvmedia.org/crossref/crossref.min.js" defer />,
    <script type="text/javascript" dangerouslySetInnerHTML={{
        __html: `
        window.ESV_CROSSREF_OPTIONS = {
            header_font_color: '2e8bc7'
        };
        check = setInterval(() => { 
            if (document.getElementsByClassName('loading').length === 0) {
                window.dispatchEvent(new Event('esv-crossref.trigger-linkify')); 
                clearInterval(check);
            }
        }, "500");
        `
    }}>
    </script>
]

templates/default.tsx

const DefaultTemplate: React.FC<{pageTitle: string, children: any}> = ({pageTitle, children}) => {

    return (
        <div className={wrapper}>
            <div>
                <header>
                    <NavBarComponent/>
                </header>
                <HydrationProvider>
                    <Server>
                        <div className="loading"></div>
                        <div className="esv-crossref-ignore">
                            {children}
                        </div>
                    </Server>
                    <Client>
                        {children}
                    </Client>
                </HydrationProvider>
            </div>
            <FooterComponent />
        </div>
    )
}
4

Hi are you still experiencing this issue?