javascriptreactjsduplicatesgatsbystatic-site-generation

Gatsby: Head meta tags get duplicated when hydration occurs on my static website. Using gatsby head api on gatsby 5.x.x

I have a gatsby static site. I mostly use gatsby-node.js to create all the pages.

I have recently upgraded from gatsby 4 to 5 to make use of the gatsby head api. This works well and all the meta tags described using Head component are built into the generated html file as expected. The problem occurs during hydration. As the page is fully loaded, all meta tags described in Head component are duplicated with an extra attribute data-gatsby-head="true".

This is my SEO component

import React from "react"

export const SEO = (props) => {
  return (
    <>
      <html lang="en" />
      <meta charSet="utf-8" id="meta-charset" />
      <title id="meta-title">{props.pageContext.metaTitle}</title>
      <meta
        id="meta-description"
        content={props.pageContext.metaDescription}
        name="description"></meta>
      <meta
        id="meta-ogtitle"
        content={props.pageContext.metaTitle}
        property="og:title"></meta>
      {/* facebook */}
      <meta
        id="meta-ogdescription"
        content={props.pageContext.metaDescription}
        property="og:description"></meta>
      <meta
        content={props.pageContext.image || props.pageContext.siteConfig.logo}
        property="og:image"
        id="meta-ogimage"></meta>
      {/* Twitter */}
      <meta
        id="meta-twittertitle"
        content={props.pageContext.metaTitle}
        property="twitter:title"></meta>
      <meta
        id="meta-twitterdescription"
        content={props.pageContext.metaDescription}
        property="twitter:description"></meta>
      <meta
        id="meta-twitterimage"
        content={props.pageContext.image || props.pageContext.siteConfig.logo}
        property="twitter:image"></meta>
      <meta property="og:type" content="website" id="meta-twittertype"></meta>
      <meta
        content="summary_large_image"
        name="twitter:card"
        id="meta-twittercard"></meta>
      <link
        rel="canonical"
        href={props.pageContext.canonicalUrl}
        id="canonicalUrl"
      />
    </>
  )
}

As per the documentation I am using ids on all my head components to prevent duplication, but this doesn't work.

Solution

  • OK this was my bad! After going through removing all my gatsby plugins and adding them back in 1 at a time, I discovered that the issue was with gatsby-plugin-no-javascript-utils plugin.

    This will teach me to make sure I review my plugins over time as my site evolves! I wasn't actively using this plugin at all. I just installed it ages ago and had never looked at it again.

    If anyone is interested the config I was using that didn't work was.

        { // THIS PLUGIN CAUSES DUPLICATE ELEMENTS WHEN USING GATSBY HEAD API
      resolve: "gatsby-plugin-no-javascript-utils",
      options: {
        noScript: false,
        noSourcemaps: true,
        removeGeneratorTag: true,
        removeReactHelmetAttrs: true,
        noInlineStyles: false,
        removeGatsbyAnnouncer: false,
      },
    },