头盔不是有效的 jsx 元素

Question

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?

Answer 1

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

npm install --save @types/react-helmet

Answer 2

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'

Answer 3

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"
},

Answer 4

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

yarn upgrade @types/react@latest