loading...

How to solve Helmet error with latest Gatsby

jmau111 profile image Julien Maury Updated on ・1 min read

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
Enter fullscreen mode Exit fullscreen mode

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.

Posted on by:

jmau111 profile

Julien Maury

@jmau111

Practise what you preach.

Discussion

pic
Editor guide
 

I just ran into this problem and these steps fixed it. Cheers.