JSX element type does not have any construct or call signatures in v3.2.0-rc

[rexpan]

TypeScript Version: 3.2.0-rc, 3.2.1

Code

import * as React from "react";
import { Component, ReactType} from "react";
function App(props:{component:ReactType}) {
  const Comp: ReactType = props.component
  return (<Comp />)
}

Expected behavior:
Should output normal as TypeScript 3.1.6

Actual behavior:
TS2604: JSX element type 'Comp' does not have any construct or call signatures.

[Jessidhia]

This is missing the rest of the error message but, to be sure, make sure you are on the latest version of @types/react and that there are no duplicates of it left around in your node_modules or lock file.

EDIT: you probably mean to use ComponentType and not ReactType

[rexpan]

@Kovensky

I have make sure using the latest @types/react 16.7.7 and no duplicates @types/react in yarn.lock.
If the issue is because of duplication of @types/react, it will return the error Duplication of definition ....

I revert back to "typescript": "^3.1.6" then it work normally.

[goloveychuk]

Typescript 3.2.1

other example

interface P1 {
  p?: boolean
  c?: string
}

interface P2 {
  p?: boolean
  c?: any // if you replace c with string, error goes away
  d?: any
}

declare var C: React.ComponentType<P1> | React.ComponentType<P2>


const a = <C p={true} /> // element does not have any ...

It looks like, the problem is related to new "nullable discriminants" changes. Looks like ts can't find common interface for those types.
Other example

interface P1 {
  p?: any
  c?: string // remove this and it's ok
}

interface P2 {
  p?: boolean
}

[layershifter]

We have a similar problem, quick example:

import * as React from 'react'

//
// Types
//

interface Config<P> {
  ElementType: React.ReactType<P>
}

interface EmptyProps {
}

interface Props {
  a?: string
}

type HProps = {
  configEmpty: Config<EmptyProps>,
  config: Config<Props>
}

//
// Component
//

const H: React.FC<HProps> = ({ config, configEmpty }) => {
  const A: React.ReactType<EmptyProps> = configEmpty.ElementType // assigned
  const B: React.ReactType<EmptyProps> = 'div' // assigned

  const C: React.ReactType<Props> = config.ElementType // assigned
  const D: React.ReactType<Props> = 'div' // in this case assignment failed

  return (
    <div>
      <A/> {/* TS2604: JSX element type 'A' does not have any construct or call signatures. */}
      <B/>

      <C/>
      <D/>
    </div>
  )
}

export default H

I see this behaviour as completely invalid, because A and B have the same types. In the same time, B and D have similar types, but D is not assignable 🤔

Code in repo: https://github.com/layershifter/ts-issue

[Jessidhia]

They do not, because you're using const. The type of A is typeof configEmpty.ElementType, but the type of B is 'div'. Using lets will show the same behavior on both.

[layershifter]

@Kovensky what about A and C? Why C works while A fails with does not have any construct error?

[Jessidhia]

That is because I improved the type of ReactType to exclude components that would not be able to receive the props you are giving it. Because none of the DOM elements can receive { a: string | undefined }, they are all excluded, and only function/class components are still allowed to be assigned to it.

[layershifter]

@Kovensky thank you 👍 Now the issue with assignment is clear for me, but what about this?

import * as React from 'react'

//
// Types
//

interface Config<P> {
  ElementType: React.ReactType<P>
}

interface Empty {}
interface Props { a?: string }

type HProps = {
  configEmpty: Config<Empty>,
  config: Config<Props>
}

//
// Component
//

const H: React.FC<HProps> = ({ config, configEmpty }) => {
  const A: React.ReactType<Empty> = configEmpty.ElementType // is React.ReactType<Empty>
  const B: React.ReactType<Empty> = 'div' // is string
  const C: React.ReactType<Props> = config.ElementType // is React.ReactType<Props>

  return (
    <div>
      {/* React.ReactType<Empty> */} <A/> {/* <--- TS2604: JSX element type 'A' does not have any construct or call signatures. */}
      {/* React.ReactType<Empty> */} <B/>
      {/* React.ReactType<Props> */} <C/>
    </div>
  )
}

export default H

A and B has the same obviously defined types, why A fails? It's really confusing thing.

[azizhk]

I would probably say @rexpan and @goloveychuk's error is similar to #28795 and #28768 based on conditional JSX constructor.

[weswigham]

Hm, so the issue is that ReactType<any> returns a union of every builtin jsx tag (plus ComponentType<any>, but that part's not problematic), and the signatures for those components do not trivially simplify (there is not a signature that perfectly encompasses all the others). This, too, relies on #7294 to be fixed. On the plus side, the underlying change needed to fix for all these JSX issues that get reported is the same.

For context, we effectively manufacture a type like this:

declare const JsxSigs: {[K in keyof JSX.IntrinsicElements]: ((props: JSX.IntrinsicElements[K]) => JSX.Element)}[keyof JSX.IntrinsicElements];

which ends up as being a union of a ton of unique signatures.