this.props.context.helmetInstances is undefined (in Gatsby project)

[mrseanbaines]

I'm trying to replace react-helmet with react-helmet-async but have run into an issue. When I place the provider in one of Gatsby's functions that wraps all pages (tried both wrapPageElement as well as wrapRootElement and got same results), I get the following error:

In Chrome:

In Firefox:

My SEO component which renders the Head component and meta tags is in a shared directory which is imported and used in two different projects. I'm not sure if this is related.

If I put the provider in the SEO component (directly around the Helmet tag) then it seems to work and doesn't throw an error, however, I don't think this is the right approach as then the provider wouldn't be shared if I wanted to use Helmet again outside of the SEO component (e.g. to add one-off head elements in one page somewhere)

[757566833]

Solve the problem by adding HelmetProvider

I've had the same problem

import { Helmet} from 'react-helmet-async'
<>
      <Helmet>
      {/**
       * any code
        **/      }
      </Helmet>
      {children}
  </>

---

import { Helmet,HelmetProvider } from 'react-helmet-async'
  <HelmetProvider>
      <Helmet>
      {/**
       * any code
        **/      }
      </Helmet>
      {children}
  </HelmetProvider>

I locked version 1.0.9 It was OK until I reinstalled node_modules
I don't know what happened

[daniel-ac-martin]

I'm seeing the same problem, after updating to webpack v5.

[daniel-ac-martin]

I suspect it comes from this line: https://github.com/staylor/react-helmet-async/blob/main/src/Dispatcher.js#L60

Would be good to understand, how this might end up as undefined.

[daniel-ac-martin]

I believe that, for me, this was caused by a broken bundle that resulted in multiple instances of React being used.

[Ben-Kincaid]

I am facing the same issue (with a custom SSR application w/ React v17.0.2) - Wrapping both the client & server in a HelmetProvider with a global helmetContext, yet regardless of where or what I wrap the HelmetProvider with, the server consistently complains about helmetInstances being undefined on the initial call to renderToString.. Considering that the context exists in the first place (this error would occur otherwise), it doesn't seem like a problem with the provider missing or being rendered incorrectly in the component tree. I echo @daniel-ac-martin: In what situation would helmetInstances be undefined internally, and is this expected behavior or a library bug? A reproducible example with SSR may be difficult but will try to provide one shortly.

[bn3t]

I have the same issue now with vitejs 5 + rollup 4. The app breaks in production build (npm run dev is fine).

The error is:

TypeError: Cannot read properties of undefined (reading 'add')

It comes from this line

react-helmet-async/src/Dispatcher.tsx

Line 71 in 6a37f73

helmetInstances.add(this);

. The context is empty for some reason.