Helmet is not a valid jsx element

4
votes

i have this problem in the react boilerplate template.

typsecript error
'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. TS2786

     7 |   return (
     8 |     <>
  >  9 |       <Helmet>
       |        ^
    10 |         <title>404 Page Not Found</title>
    11 |         <meta name="description" content="Page not found" />
    12 |       </Helmet>

imported as

import { Helmet } from 'react-helmet-async';

investigating the "" shows this error

HelmetProvider' cannot be used as a JSX component. Its instance type 'HelmetProvider' is not a valid JSX element. Type 'HelmetProvider' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.ts(2

`import { HelmetProvider } from 'react-helmet-async';

why is this not working?

3
reactjstypescript
Do you have a context provider? Are you using the correct version of the library that matches the documentation you got that code from? – Jared Smith
I just installed and ran this: github.com/react-boilerplate/react-boilerplate-cra-template From my limited redux knowledge, i can see the, theme provider, and helmet provider wrapping the app. – Alexander Hemming
That's good, please edit that information into the question itself. – Jared Smith
VSCode was showing me the exactly same error when using the synchronous helmet package. However, a `Developer: Reload Window" was enough to "fix" it. – Dejan

3 Answers

7
votes

I was able to resolve this by installing @types/react-helmet.

npm install --save @types/react-helmet

0
votes

https://github.com/staylor/react-helmet-async#usage

I think you need to default import it, as you might be using the older version.

import Helmet from 'react-helmet-async'
-1
votes

I also hit this error using the react boilerplate template. This resolved the error for me!

yarn upgrade @types/react@latest