In TypeScript-based React, 'HelmetProvider' cannot be used as a JSX component. related error

[chebread]

I am using typescript based react based on vite.
However, 'HelmetProvider' cannot be used as a JSX component. error occurs when calling any component of react-helmet-async.
Using @types/react-helmet does not solve this error.
I referred to nfl/react-helmet#646 as well, but couldn't solve it.

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { HelmetProvider } from 'react-helmet-async';
import App from 'App';
import GlobalStyles from 'layouts/GlobalStyles';

const targetDom = document.getElementById('root');
const root = ReactDOM.createRoot(targetDom as HTMLElement); // targetDom이 Null이라 ! 추가
root.render(
  <HelmetProvider> // 'HelmetProvider' cannot be used as a JSX component. error occured
    <GlobalStyles />
    <App />
  </HelmetProvider>
);

[kamiyo]

Hi, you might have an outdated @types/react in your yarn.lock or npm.lock. I had the same issue, and in my lock file had both v17 and v18 types. I just deleted the entry in the lockfile for v17, and re-ran yarn (I think the same should apply for npm).

[meassinal]

I have also encountered the same issue as @chebread . @kamiyo I'm using react v^17.0.2 and @types/react ^17.0.33, yet still I can't fix it.

[kamiyo]

@meassinal Did you make sure there were no other versions of @types/react in your lock file? Even though my package.json had the right typings, either because of another library or whatever reason, it kept both versions around in the yarn.lock. Once I deleted them manually from the lockfile (I think I just used a basic search for @types/react and checked the version referenced in the block) I re-ran yarn. You should see yarn deleting the old unused version.

Of course, it could be another issue that's not related to this...

[meassinal]

@kamiyo Thank you for your reply. I decided to use https://github.com/justinmahar/react-super-seo instead as it doesn't have any conflict in my project. Let's see in the future if I happen to come back to react-helmet-async.

[iammadanlal]

Hey, any update on this?

index.tsx

import ReactDOM from 'react-dom';
import { HelmetProvider } from 'react-helmet-async';
import { BrowserRouter } from 'react-router-dom';

import 'nprogress/nprogress.css';
import App from 'src/App';
import * as serviceWorker from 'src/serviceWorker';

ReactDOM.render(
  <HelmetProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </HelmetProvider>,
  document.getElementById('root')
);

serviceWorker.unregister();

TS2786: 'HelmetProvider' cannot be used as a JSX component.
  Its instance type 'HelmetProvider' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("C:/Users/DELL/Documents/GitHub/bookeezz_admin/.yarn/cache/@types-react-npm-18.2.21-c50bc2f785-ffed203bfe.zip/node_modules/@types/react/ts5.0/index").ReactNode'.
Type '{}' is not assignable to type 'ReactNode'.ts(2786)
     8 |
     9 | ReactDOM.render(
  > 10 |   <HelmetProvider>
       |    ^^^^^^^^^^^^^^
    11 |     <BrowserRouter>
    12 |       <App />
    13 |     </BrowserRouter>

I am using following;-
@types/react 17.0.40
@types/react-dom 17.0.13
react-helmet-async 1.3.0
typescript 4.7.3

Any solutions so far?
I don't know if it is raised by using yarn 3 or not? can it be?

[iammadanlal]

For those who is facing same issue, here the solution:-
Add following to your package.json

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

After then run yarn command. Close and restart the server.

[staylor]

TS types will be more stable on next release, which is imminent #197