why JSX element type 'x' does not have any construct or call signatures

January 19, 2022

I have an imported image and I want to use it in a function. the image:

import  Edit  from  'src/assets/setting/advertising/edit.png';

and this is the function:

function getOptions(row) {
        return (
            <div>
                <Edit /> //error
                <img src={Edit} /> //error
            </div>
        );
    }

<Edit /> got this error:

JSX element type ‘Edit’ does not have any construct or call signatures.

and <img src={Edit} /> got this error:

Type ‘StaticImageData’ is not assignable to type ‘string’.ts(2322)

>Solution :

The two issues are inextricably linked, but they have to be solved differently.

First issue: You are trying to render an imported static file as a HTML element. You can only render React Components or HTML Elements in React, using that syntax.

Example:

function MyCustomElement() {
    return (
        <div>This is custom element<div>
    );
}

export default function Page() {
    return <div>
        <MyCustomElement />
    </div>;
}

Second Issue: You’re trying to pass in an imported static file as the src of an image. You would need to pass in a string.

Example:

const PATH_TO_IMAGE = 'src/assets/setting/advertising/edit.png';

function getOptions(row) {
    return (
        <div>
            <img src={PATH_TO_IMAGE} />
        </div>
    );
}

Please, note that the value of "src" must be publicly accessible.