JSX Element does not have any construct or call signatures

Question

I am trying to add Application Insights in my ReactJS Application. I changed the JS code that is provided on the GitHub Demo to TypeScript.. now I have

class TelemetryProvider extends Component<any, any> {
    state = {
        initialized: false
    };

    componentDidMount() {
        const { history } = this.props;
        const { initialized } = this.state;
        const AppInsightsInstrumentationKey = this.props.instrumentationKey;
        if (!Boolean(initialized) && Boolean(AppInsightsInstrumentationKey) && Boolean(history)) {
            ai.initialize(AppInsightsInstrumentationKey, history);
            this.setState({ initialized: true });
        }

        this.props.after();
    }

    render() {
        const { children } = this.props;
        return (
            <Fragment>
                {children}
            </Fragment>
        );
    }
}

export default withRouter(withAITracking(ai.reactPlugin, TelemetryProvider));

But when I try to import the same component <TelemetryProvider instrumentationKey="INSTRUMENTATION_KEY" after={() => { appInsights = getAppInsights() }}></Telemetry> I get an error Severity Code Description Project File Line Suppression State

(TS) JSX element type 'TelemetryProvider' does not have any construct or call signatures.

I attempted to simply // @ts-ignore, that did not work. How do I go about solving this?

user7839839 user7839839 · Accepted Answer · 2020-11-09T14:40:00

Given the example above, I hit the same issue. I added the following:

let appInsights:any = getAppInsights();


<TelemetryProvider instrumentationKey={yourkeyher} after={() => { appInsights = getAppInsights() }}>after={() => { appInsights = getAppInsights() }}>

Which seem to solve the issue for me, I am now seeing results in Application Insights as expected.

I guess if you want to have the triggers etc on a different Page/Component you may wish to wrap it in your own useHook or just add something like this to the component.

let appInsights:any;

useEffect(() => {
    appInsights = getAppInsights();
}, [getAppInsights])

function trackEvent() {
  appInsights.trackEvent({ name: 'React - Home Page some event' });
}

Not the best answer, but it's moved me forward. Would be nice to see a simple hooks version in typescript.

Really hope it helps someone or if they have a cleaner answer.

JSX Element does not have any construct or call signatures

1 Answers