Error when adding Facebook Messenger Chat to site

Description

I’m trying to add this feature from Facebook that lets you integrate a page’s Messenger chat directly into a website. I did so by creating the following component:

import React from "react";

class MessengerChat extends React.Component {
  componentDidMount() {
    window.fbAsyncInit = function() {
      FB.init({ //eslint-disable-line
        xfbml: true,
        version: 'v6.0'
      });
    };

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  }

  render() {
    return (
      <>
        <div id="fb-root" />
        <div
          className="fb-customerchat"
          attribution="setup_tool"
          page_id="XXXXXXXXXXXX"
          theme_color="#2f8dff"
          logged_in_greeting="Hi there! Have any questions?"
          logged_out_greeting="Hi there! Have any questions?" />
      </>
    );
  }
} 

export default MessengerChat;

I then include this component in my layout like so:

const Layout = withTheme((props) => (
  <>
    <GlobalStyle theme={props.theme} />
    <Header />
    <ContentWrapper>{props.children}</ContentWrapper>
    <MessengerChat />
    <Footer/>
  </>
));

All my pages are wrapped in this layout so the chat appears in all of them. However, including this plugin seems to break routing, as when I click a Gatsby Link I get the following error: TypeError: Cannot read property 'getElementsByTagName' of null at navigation.js:174, and nothing renders on the page (just a blank page). Here’s the specific line that gets the error:

  171 | if (document.title) {
  172 |   pageName = document.title
  173 | }
> 174 | const pageHeadings = document
  175 |   .getElementById(`gatsby-focus-wrapper`)
  176 |   .getElementsByTagName(`h1`)
  177 | if (pageHeadings && pageHeadings.length) {

Removing the MessengerChat component from my layout fixes this issue, but I’d like to include it. However I have no clue why it’s breaking the routing (going to a page URL directly, or refreshing after getting the error works).

Steps to reproduce

Include the above component on your pages’ layout and try clicking a Gatsby Link to another page.

Environment

  System:
    OS: Windows 10 10.0.17763
    CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
  Binaries:
    Node: 12.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.9.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.17 - /c/Python27/python
  Browsers:
    Edge: 44.17763.831.0
  npmPackages:
    gatsby: ^2.19.45 => 2.19.45
    gatsby-image: ^2.2.44 => 2.2.44
    gatsby-plugin-google-analytics: ^2.1.38 => 2.1.38
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.2.48 => 2.2.48
    gatsby-plugin-offline: ^3.0.42 => 3.0.42
    gatsby-plugin-prefetch-google-fonts: ^1.4.3 => 1.4.3
    gatsby-plugin-react-helmet: ^3.1.24 => 3.1.24
    gatsby-plugin-sharp: ^2.4.13 => 2.4.13
    gatsby-plugin-sitemap: ^2.2.30 => 2.2.30
    gatsby-plugin-styled-components: ^3.2.1 => 3.2.1
    gatsby-source-filesystem: ^2.1.56 => 2.1.56
    gatsby-styled-components-dark-mode: ^1.1.1 => 1.1.1
    gatsby-transformer-sharp: ^2.3.19 => 2.3.19

Also if it helps here’s the full log output from my console (it’s really long though): localhost-1586319860749.log

[herecydev]

Don’t spread props on a fragment, it doesn’t make any sense as a fragment is meant to be an empty element.

[jlisbz]

@ROODAY @herecydev @hronchetti Thanks a lot. This fixed the issue for my gatsby / facebook messenger integration.