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

DavyOnGit commented 2 years ago

Description

Getting TS2786 for Helmet and HelmetProvider when setting up a new project.

ERROR in internals/startingTemplate/src/app/components/NotFoundPage/index.tsx:9:8
TS2786: 'Helmet' cannot be used as a JSX component.
  Its instance type 'Helmet' is not a valid JSX element.
     7 |   return (
     8 |     <>
  >  9 |       <Helmet>
       |        ^^^^^^
    10 |         <title>404 Page Not Found</title>
    11 |         <meta name="description" content="Page not found" />
    12 |       </Helmet>

ERROR in internals/startingTemplate/src/app/index.tsx:23:8
TS2786: 'Helmet' cannot be used as a JSX component.
  Its instance type 'Helmet' is not a valid JSX element.
    21 |   return (
    22 |     <BrowserRouter>
  > 23 |       <Helmet
       |        ^^^^^^
    24 |         titleTemplate="%s - React Boilerplate"
    25 |         defaultTitle="React Boilerplate"
    26 |         htmlAttributes={{ lang: i18n.language }}

ERROR in internals/startingTemplate/src/app/pages/HomePage/index.tsx:7:8
TS2786: 'Helmet' cannot be used as a JSX component.
  Its instance type 'Helmet' is not a valid JSX element.
     5 |   return (
     6 |     <>
  >  7 |       <Helmet>
       |        ^^^^^^
     8 |         <title>HomePage</title>
     9 |         <meta name="description" content="A Boilerplate application homepage" />
    10 |       </Helmet>

ERROR in internals/startingTemplate/src/index.tsx:35:6
TS2786: 'HelmetProvider' cannot be used as a JSX component.
  Its instance type 'HelmetProvider' is not a valid JSX element.
    33 | ReactDOM.render(
    34 |   <Provider store={store}>
  > 35 |     <HelmetProvider>
       |      ^^^^^^^^^^^^^^
    36 |       <React.StrictMode>
    37 |         <App />
    38 |       </React.StrictMode>

Steps to reproduce

yarn create react-app --template cra-template-rb my-app
cd my-app
yarn start

I also tried running in a clean docker container to verify it wasn't my config.

docker run -it --rm node:lts /bin/bash
yarn create react-app --template cra-template-rb my-app
cd my-app
yarn start

Versions

react-boilerplate-cra-template: 1.2.3
node --version: v16.14.2
npm --version: 8.5.0
yarn --version: 1.22.18
OS: Tried Win11 21H2 and Win11 21H2 + WSL (Ubuntu)

mooSylla commented 2 years ago

I have the same issue with BrowserRouter

    30 |     <>
  > 31 |       <BrowserRouter>
       |        ^
    32 |         <Switch>

Elunir commented 2 years ago

TS2786: 'Helmet' cannot be used as a JSX component. Its instance type 'Helmet' is not a valid JSX element. 7 | return ( 8 | <>

9 | | ^^^^^^ 10 | 404 Page Not Found 11 | 12 |

Can-Sahin commented 2 years ago

Its because of the new breaking change in "@types/react v18" pfff... The quickest way is to update these libraries to the latest versions. Let me know if it works (just tested my self)

    "@types/react": "18.0.2",
    "@types/react-dom": "18.0.0",
    "react-i18next": "11.16.5",
    "react-helmet-async": "1.3.0",

DavyOnGit commented 2 years ago

That was it. Fix verified. Thanks @Can-Sahin.

react-boilerplate / react-boilerplate-cra-template