Gatsby: [PSA] There's a known issue with react-helmet and useEffect

[daydream05]

Description

When using the new React API useEffect it causes a maximum call stack size exceeded error.

Steps to reproduce

Here's a link to the issue on react-helmet https://github.com/nfl/react-helmet/issues/437

How to fix(?)

One of the suggestions is to upgrade to v6.0.0-beta

Possible bug

However, upon updating and running gatsby develop I ran into this issue

TypeError: Cannot read property 'renderStatic' of undefined
- render-page.js:1546 Object../node_modules/gatsby-plugin-react-helmet/gatsby-ssr.js.exports.onRenderBody

Does this mean we also need to update gatsby-plugin-react-helmet to use v6.0.0-beta as dependency?

[DSchau]

@daydream05 Hey Vince! 👋

That's super weird you hit that error.

Did you ensure you're on the latest gatsby-plugin-react-helmet? We implemented a fix some time ago to (theoretically) ensure compatibility with the react-helmet beta, specifically I recall that they removed the default export.

Also, as always, reproduction would be super appreciated.

[DSchau]

_If_ the plugin has an issue--hopefully we can ship an update that's backwards compatible _and_ fixes support with [email protected]

[daydream05]

Hey Dustin! You're helpful as always!

I've updated the gatsby-plugin-react-helmet to the latest version and it did fix the renderStatic error. But I'm still getting a stack

Here's what i'm trying to do

const GetAQuote = ({ data }) => {

  const [isVisible, setVisibility] = useState(true)

  useEffect(() => {
    setVisibility(false)
  })
}

For some reason if I just console.log inside useEffect, it works.

I thought maybe useState is not allowed inside useEffect so I tested it here:
https://codesandbox.io/s/j75lm36r35

Now i think the issue might be on my side, I'll try to reproduce it but in the meantime here's more info

clipboard

    gatsby: ^2.1.18 => 2.1.18 
    gatsby-image: next => 2.0.0-rc.4 
    gatsby-plugin-canonical-urls: next => 2.0.0-rc.2 
    gatsby-plugin-feed: next => 2.0.0-rc.2 
    gatsby-plugin-google-analytics: next => 2.0.0-rc.2 
    gatsby-plugin-manifest: ^2.0.19 => 2.0.19 
    gatsby-plugin-netlify: next => 2.0.0-rc.6 
    gatsby-plugin-nprogress: next => 2.0.0-rc.1 
    gatsby-plugin-offline: ^2.0.24 => 2.0.24 
    gatsby-plugin-react-helmet: ^3.0.8 => 3.0.8 
    gatsby-plugin-react-svg: ^2.0.0 => 2.0.0 
    gatsby-plugin-sitemap: next => 2.0.0-rc.2 
    gatsby-plugin-styled-components: next => 3.0.0-rc.5 
    gatsby-plugin-typography: next => 2.2.0-rc.3 
    gatsby-remark-external-links: 0.0.4 => 0.0.4 
    gatsby-remark-prismjs: next => 3.0.0-rc.2 
    gatsby-source-contentful: next => 2.0.1-rc.9 
    gatsby-source-filesystem: next => 2.0.1-rc.6 
    gatsby-transformer-remark: next => 2.1.1-rc.5 
    gatsby-transformer-sharp: next => 2.1.1-rc.3 

[DSchau]

Is this a separate issue from react-helmet then?

[daydream05]

So I figured it out! I forgot to update to [email protected]
after updating gatsby-plugin-react-helmet

Summary:

• gatsby-plugin-react-helmet is perfectly fine and it works with the react-helmet beta
• current version of react-helmet causes maximum-stack error

Here's a reproduction of the error on gatsby:
https://codesandbox.io/s/j75lm36r35

[DSchau]

Awesome - thanks for doing that! That reproduction has react-helmet pinned to 5.2.0 though, so that's sorta expected?

Maybe this can be best resolved with some documentation, though? i.e. a section on "Hooks and react-helmet" in the README?

[daydream05]

Yup and here's the fixed version with updated to v6.0.0-beta: https://codesandbox.io/s/01knpr64jn

That's a great idea! The gotchas that I came up across with are:

After updating to v6.0.0.beta

1. Make sure you have the latest gatsby-plugin-react-helmet
2. Don't forget to refactor import Helmet from 'react-helmet' into import { Helmet } from 'react-helmet'

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[ryandrew14]

Not too sure how to remove the stale label, but I submitted a PR #12873 yesterday, could somebody take a look?

[ryandrew14]

Resolved by #12873 -- closing.