TS2604: JSX elemy type '' does not have any construct or call signatures

Question

I worked on my lazy load component's loader and got an error

TS2604: JSX elemy type 'LoadedAsyncComponent' does not have any construct or call signatures

I think so I wrote a bad code and all, because I recently started writing on React + TypeScript chain

and it is my component:

import * as React from 'react';

declare interface AsyncComponentProps {
    moduleProvider: Function;
}
declare interface AsyncComponenState {
    LoadedAsyncComponent?: (React.Component<any, any> | null);
}

export class AsyncComponent extends React.Component<AsyncComponentProps, AsyncComponenState> {
    private isLoaded: boolean = false;
    constructor(props: any) {
        super(props);
        this.state = {
            LoadedAsyncComponent: null
        };
    }
    componentWillMount() {
        if (!this.isLoaded) {
            this.isLoaded = true;
            this.props.moduleProvider().then((provideData: any) => {
                this.setState({LoadedAsyncComponent: provideData[Object.keys(provideData)[0]] as React.Component});
            });
        }
    }
    render() {
        const {LoadedAsyncComponent} = this.state;
        return LoadedAsyncComponent ? <LoadedAsyncComponent/> : <div className="page-loading">Loading data</div>;
    }
}

Error is here:

return LoadedAsyncComponent ? <LoadedAsyncComponent/> : <div className="page-loading">Loading data</div>;

Also moduleProvider prop is a import promise:

import(/* webpackChunkName: "home" */ './Home/Home')

Sergey Volkov Sergey Volkov · Accepted Answer · 2018-02-03T09:02:54

I solved that problem when I changed that row:

return LoadedAsyncComponent ? <LoadedAsyncComponent/> : <div className="page-loading">Loading data</div>;

to:

return LoadedAsyncComponent ? React.createElement(LoadedAsyncComponent, {} as any) : <div className="page-loading">Loading data</div>;

and change type of LoadedAsyncComponent in state of AsyncComponent from React.Component<any,any> to React.ComponentClass and its worked for me for now...

TS2604: JSX elemy type '' does not have any construct or call signatures

1 Answers