5

I am using semantic-ui-react in my react app with typescript and it is giving error. The project uses PnPify.

TS2604: JSX element type 'Header' does not have any construct or call signatures.

I am very new to typescript and don't know how to resolve this, here is a component

import React from 'react'
import Card from '../UI/Card'
import {Header } from 'semantic-ui-react'


const Test: React.FC = () => {

    return (
         <div>
             <Card>
                <Header> Test </Header>
            </Card>
        </div>
    )
}


export default Test

enter image description here

EDIT: I copy-pasted this definition file for types and it seems to be working but I am not sure this is the right way to do it https://gist.github.com/tomitrescak/6261ad27dbe43aad03b2497721d751f5

SUMIT NIHALANI
  • 387
  • 1
  • 10

2 Answers2

1

I fixed this error by checking the versions of my @types/react and @types/react-dom package.

In my case I had React version 16.X.X installed, but version 18.X.X of the @types packages.

When I changed the @types packages to 16.X.X to match my react version, the error went away.

Jake
  • 251
  • 4
  • 4
0

You can also get this error when you end up installing the package to the wrong directory.

Make sure your app directory (where you ran create-react-app and installed all dependencies) is where you install semantic-ui-react as well.

Tapas Trivedi
  • 1
  • 1