JSX element type 'xxx' is not a constructor function for JSX elements. Property 'yyy' is protected in type 'xxx' but public in type 'ElementClass'

Question

I am trying to import an React class called Vega-Lite from a project called Voyager.

Here's my code:

import * as React from 'react';
import {VegaLite} from 'datavoyager/build/components/vega-lite';

export interface Props {
  spec: any;
  logger: any;
}

export const View = ({spec, logger}: Props) => {
  return(
    <VegaLite spec={spec} logger={logger}/>
  );
};

Here's my error:

[ts] JSX element type 'VegaLite' is not a constructor function for JSX elements. Property 'componentDidMount' is protected in type 'VegaLite' but public in type 'ElementClass'.

I know that in the class Vega-Lite, the function componentDidMount() is indeed protected. But how do I fix this error?

PS: I've tried setting allowSyntheticDefaultImports to true in my tsconfig.json, but the same error persists.

Answer 1

You need to downgrade your react typings to below 15.0.25 version. Starting from 15.0.25version all of the lifecycle methods are forced to be public.

Here is an issue about it: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16893

A better solution would be creating an issue in voyager repo which would tell them that their components are incompatible with newer react typings. They use ^15.0.8.