gatsby-plugin-react-helmet adds a blank title tag

[dan-mba]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I am attempting to migrate a project to use the new Head API.
I migrated all my react-helmet calls to the new API.
But, I use a plugin that uses gatsby-plugin-react-helmet.

On build, there are 2 title tags in the HTML, the one from my SEO component and an empty one.
The empty one is as follows

<title data-react-helmet="true"></title>

While my specified tag is

<title data-gatsby-head="true">My Title</title>

Reproduction Link

https://codesandbox.io/s/interesting-bardeen-9dk5z2?file=/src/pages/index.jsx

Steps to Reproduce

1. Use react-helmet in any component on page
2. Use new Head API on page with a title tag
3. See 2 title tags in page source
   ...

Expected Result

See only the title tag I specifed

Actual Result

Get addition title tag which appears first & blocks my title

Environment

System:
    OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.16.0/bin/yarn
    npm: 8.13.2 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
  npmPackages:
    gatsby: ^4.19.0 => 4.19.0 
    gatsby-awesome-pagination: ^0.3.8 => 0.3.8 
    gatsby-plugin-image: ^2.19.0 => 2.19.0 
    gatsby-plugin-sharp: ^4.19.0 => 4.19.0 
    gatsby-plugin-sitemap: ^5.19.0 => 5.19.0 
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.27 => 1.1.27 
    gatsby-source-filesystem: ^4.19.0 => 4.19.0 
    gatsby-theme-material-ui: ^5.2.0 => 5.2.0 
    gatsby-transformer-sharp: ^4.19.0 => 4.19.0

Config Flags

No response

[LekoArts]

This happens because you use react-helmet and the Head API in the same page. You have to use one of them, you can't use them together on the same page. When I removed the <Seo> component from src/pages/index.jsx in your reproduction there was no empty title tag.

To be fair, we weren't aware of this limitation but it's also not something we'll spend time on fixing as we want people to move to the Head API.

[dan-mba]

I will work on a PR.
Please let me know what you think about the following for a note

Using the Head API and react-helmet in the same page is not supported as it can generate unexpected results.

[marvinjude]

@dan-mba We fixed this issue in #36303 Can you possibly try it out and drop a feedback here? It's in @next so you'll need to do

yarn add gatsby-plugin-react-helmet@next

[dan-mba]

Is the fix in gatsby or gatsby-plugin-react-helmet?
do I need to install the @next release of both?

I will try, but the problem I am having is caused by a plugin, gatsby-theme-material-ui, so I will need to force a dependency override.

I have a PR open to fix that problem.

[dan-mba]

@marvinjude I added the following to my package.json and the title problem is fixed

  "overrides": {
    "gatsby-plugin-react-helmet": "^5.21.0-next.1"
  },

[marvinjude]

@dan-mba my bad. The change is in gatsby-plugin-react-helmet — So you only need to install next for the plug-in