react-helmet: TS2786: 'Helmet' cannot be used as a JSX component

Helmet works in JSX but not in Typescript, I am getting:

TS2786: 'Helmet' cannot be used as a JSX component
Type 'Helmet' is missing the following properties from type 'ElementClass':
render, context, setState, forceUpdate

import { Helmet } from 'react-helmet';

return (
    <>
      <Helmet>
        <title>
          {translation('supportPage.heading')}
        </title>
      </Helmet>
      <Breadcrumbs />
      ...
  </>
);

react@17.0.1
react-helmet@6.1.0
@types/react-helmet@6.1.1 (devDependencies)

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 21
Comments: 22

Commits related to this issue

add ts-ignore for react-helmet Workaround for issue https://github.com/nfl/react-helmet/issues/646 — committed to gagahpangeran/gagahpangeran.com by gagahpangeran 2 years ago

Most upvoted comments

+1 Similar issue with react 18

+13

JohnDevitt on Jun 1, 2022

also experiencing issues with this once upgrading to react-18

+11

0xD4V1NC1 on May 26, 2022

Wrapper did not work in our case while we attempted to upgrade a TypeScript project to React 18. The supposed fix was to have the latest @types/react as a resolution in the package.json:

  "resolutions": {
    "@types/react": "18.0.28"
  },

sutt0n on Mar 21, 2023

@Pixelatex I added {/* @ts-ignore */} above where i used the Helmet component as this doesn’t seem like an impactful issue to me.

0xD4V1NC1 on Jul 19, 2022

Hi, I had the same issue. I found out that in my node_modules (or yarn cache), I had @types/react v17 and v18, even though I only had v18 in my package.json. I deleted the entry for v17 (@types/react only) in my yarn.lock, re-ran yarn, and it worked. I must not have updated react typings cleanly.

kamiyo on Mar 14, 2023

I have the same issue on my side with last versions of react-helmet and its @types/react-helmet. I’ve just solved it by removing the @types/react-helmet package and adding declare module "react-helmet"; to a .d.ts file instead.

MADEiN83 on Jul 8, 2022

How should I solve this problem? Still can’t solve it?

chebread on Feb 11, 2023

https://github.com/staylor/react-helmet-async/issues/154

gilluminate on Jan 20, 2023

For those of you guys who are having a TS error after upgrading to react 18, you can try adding a simple wrapper for Helmet:

type HelmetProps = React.ComponentProps<typeof Helmet>;

const HelmetWithChildren: FC<HelmetProps & { children?: React.ReactNode }> = ({
    children,
    ...rest
}) => <Helmet {...rest}>{children}</Helmet>;

v-almonacid on Aug 20, 2022

Ah yea of course! That will do for now! Thank you @EVASIVE!

sunnz on Jul 16, 2021