JSX element type 'ReactElement<any>' is not a constructor function for JSX elements.

[christopherthielen]

If you import @uirouter/visualizer into a React + Typescript project using @types/react, you get an error when rendering a Functional Component from in some cases.

The typings for @uirouter/visualizer include the individual component classes definitions, so somebody can theoretically render the components themselves using preact. However, even importing 'preact' anywhere in the project causes a conflict in the merged JSX.Element definition. Importing @uirouter/visualizer implicitly imports preact.

This issue can be seen with this simple proof of concept:

npm init -y
npm install @types/react@16.7.20 preact@8.4.2 react@16.7.0 typescript@3.2.4
echo 'import * as React from "react";
import "preact";

const FunctionalComponent: React.FC = () => <h1>foo</h1>;
class ClassComponent extends React.Component {
  render() {
    return <FunctionalComponent/>;
  }
}' > test.tsx;
npx tsc ./test.tsx --skipLibCheck --jsx react

test.tsx:7:12 - error TS2605: JSX element type 'ReactElement<any>' is not a constructor function for JSX elements.
  Type 'ReactElement<any>' is missing the following properties from type 'Element': nodeName, attributes, children

7     return <FunctionalComponent/>;
             ~~~~~~~~~~~~~~~~~~~~~~

This issue in the preact repo may be related: preactjs/preact#1036 but I'm not sure.