Error TS2604: JSX element type '…' does not have any construct or call signatures

Question

I am creating a package that contains common components that we created on the company I work for, and we want available for all projects. We use TypeScript, and I moved the code to a new project and I am able to publish to npm and add the package in the dependencies section of one of my projects. However, when I try to use it I get a compile error saying

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

my code (simplified) looks like this:

import Loader from "my-common-components";
export class Contact extends React.Component<any, any> {
.
.
.
    public render() {
        this.state.loading) && <Loader />
        <div>Hello World</div>
    }
}

The linter indicates that the error is on the <Loader /> part, however the code of this component (Contact) didn't change, I just moved Loader away from the project and into a separate package (my-common-components).

Alejandro B. Alejandro B. · Accepted Answer · 2017-09-06T17:01:57

So it turns out that the error was that when moving to the separate package, I added the component to an index file that reexported the component. But by doing so, I made it cease to be a default export. Kind of obvios in hindsight. So the fix was to wrap the name of the component name in curly braces so to import the actual named component, like this:

import { Loader }from "my-common-components";

and that's it. I hope I saved someone from making the same mistake, as when searching I found lots of places describing the same error but caused by different roots, like the Typescript version and wrong required instructions.

Error TS2604: JSX element type '…' does not have any construct or call signatures

1 Answers