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

6
votes

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.

1
reactjstypescript
Do you have a line "allowSyntheticDefaultImports": true in tsconfig.json? – Andrew
@Andrew yes I've tried that, but that doesn't remove the error... – Zening Qu

1 Answers

2
votes

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.