How to solve Helmet error with latest Gatsby

I’ve been facing this annoying bug with Helmet when trying to update my dependencies on a project powered by Gatsby :

yarn upgrade-interactive --latest

I like to keep my dependencies updated even if it gives me extra work :)

Helmet is a reusable React component that manages all of your changes to the document head.

It’s very handy, that is why all react-based frameworks use it.

When it comes to Gatsby, it’s pretty cool because of its fantastic ecosystem. There’s a plugin that ensures full compatibility.

So please use gatsby-plugin-react-helmet.

But if you are using the latest versions of your Gatsby dependencies, which is better, please make sure you do the following :

  • yarn add gatsby-plugin-react-helmet react-helmet
  • add gatsby-plugin-react-helmet to your plugin list in your gatsby-config.js
  • replace all occurrences of import Helmet from "react-helmet" with import { Helmet } from "react-helmet"

Before that, I had a lot of errors “Helmet undefined” in my theme.

I hope that helps.

See Also