Helmet is not a valid jsx element

user_12030634 0
Viewed 8784

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?

typescript reactjs
4 Answers

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

npm install --save @types/react-helmet

user_18406620

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

yarn upgrade @types/react@latest
user_50381250
user_42887060

I used react 17. So I resolved it by adding this to package.json:

"resolutions": {
   "@types/react": "17.0.2",
   "@types/react-dom": "17.0.2"
},
user_26571550
Related