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

for me the solution was:

export type WrapperProps = {
	mainApp: React.ElementType
}

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

I might have misunderstood the thread, but I wanted to pass a reference of a jsx Element to another jsx element:

export const AppWrapper = hot(module)((props: WrapperProps) => {

	const MainApp = props.mainApp;
	if (!MainApp)  // <-- JSX elements MUST start with upper case!!
		throw new ImplementationMissingException("mainApp was not specified!!");

	return (
		<Router history={BrowserHistoryModule.getHistory()}>
			<MainApp prop1={"value"}/>
		</Router>)
});

Together with:

export type WrapperProps = {
	mainApp: React.ElementType<{prop1:string}>
}

Running into a problem that might be related. I have the following component:

function MaybeLabel(props: { useLabel: boolean }) {
   const { useLabel } = props;
   const TagName = useLabel ? 'label' : 'div';

   return <TagName>Woookie</TagName>
}

which results in

error TS2604: JSX element type 'TagName' does not have any construct or call signatures.

while

function MaybeLabel2(props: { useLabel: boolean }) {
   const { useLabel } = props;
   const TagName = useLabel ? 'span' : 'div';

   return <TagName>Woookie</TagName>
}

is completely acceptable to the typescript compiler. As is:

export function MaybeLabel3(props: { useLabel: boolean }) {
	const { useLabel } = props;
	const TagName = useLabel ? 'label' : 'div';
	
	return React.createElement(TagName, 'Wookie')
}

Where the only difference in MaybeLabel2 is that I’m using span instead of label (using span instead of div also seems acceptable). MaybeLabel3 makes it even stranger, as that should be exactly what MaybeLabel compiles to.

Using latest version of @types/react and @types/react-dom, and verified the problem in typescript 3.2.1, 3.2.2 and 3.3.0-dev.20181219. In 3.1.6 it all works as expected (none of the examples produce errors)

Instead of Component, use ComponentClass

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
}

I got this error because I imported default but declared the corresponding export as named instead of default in the .d.ts file…confused me for awhile

for me the solution was:

export type WrapperProps = {
	mainApp: React.ElementType
}

niu b

ni zhe hui da ye nb haha

for me the solution was:

export type WrapperProps = {
	mainApp: React.ElementType
}

niu b

@ericmasiello I ended up using React.ElementType for a dynamically passed in component. My use case is basically the following:

type Props = {
    heading: React.ElementType
}
const Header: FC<Props> = props => {
    const Header = props.heading ?? 'h2';
    return (
        <Header className="some-class"><children /></Header>
    )
}

@TacB0sS please elaborate.

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

Just wanted to add this here. Not sure if this was already said but if you are doing a hirer order component you want to use the type React.ComponentType

. “https://flow.org/en/docs/react/types/#toc-react-componenttype”

@TacB0sS For me the main trick was adding if condition. Looks like it doesn’t matter whether you use React.ComponentType or React.ElementType

@ericmasiello I ended up using React.ElementType for a dynamically passed in component. My use case is basically the following:

type Props = {

    heading: React.ElementType

}

const Header: FC<Props> = props => {

    const Header = props.heading ?? 'h2';

    return (

        <Header className="some-class"><children /></Header>

    )

}

Cool! What version of Typescript and what version of @types/react do you have installed?

I’m not sure i understand the outcome of this. I have a similar error that I have not been able to resolve. Here is my use case:

// Logo.tsx

import classNames from 'classnames';

interface Props extends React.HTMLAttributes<HTMLElement> {
  tag?: React.ReactType;
}

const Logo: React.SFC<Props> = props => {
  const { tag: Tag = 'div', className, ...rest } = props;
  return (
    <Tag
      className={classNames(styles.logo, className)}
      {...rest}
      dangerouslySetInnerHTML={{ __html: logo }}
    />
  );
};

and then I’m using it like such in another component like so:

const Header: React.SFC<{}> = () => {
  return (
    <div>
      <Logo tag="h1" aria-label="Syn By Design: Eric Masiello's Portfolio" />
      Header online
    </div>
  );
};

When I run the compiler, i get this error:

components/Logo.tsx:13:6 - error TS2604: JSX element type 'Tag' does not have any construct or call signatures.

13     <Tag
        ~~~


Found 1 error.

Any ideas how to make this work?

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';
import { Header } from 'semantic-ui-react';

function App() {

  return (
    <div className="App">
      <Header as='h2' icon='users' content='Reactivities' />
      <header className="App-header"></header>
    </div>
  );
}

When I write this code i get “JSX element type ‘Header’ does not have any construct or call signatures.ts(2604)” error.

I solved this problem by doing any of these two things:

Case 1:

.d.ts file:

declare module "foo" {
   interface PropFoo {
      propy: string;
   }

   class MyTypedComponent extends React.Component<PropFoo> { }
}

React:

import MyTypedComponent from "foo";

function AnotherComponent() {

   /* Notice in here we have to use the dot operator and reference the component */
   return <MyTypedComponent.MyTypedComponent /> 
}

Notice that, in order to use the newly typed component, we have to write MyTypedComponent.MyTypedComponent . This may be obvious to some people, but I wasted alot of time when all I had to do was to use the dot operator on the import and reference the component.

Case 2 [just another way of writing Case 1]:

.d.ts file:

declare module "foo" {
   interface PropFoo {
      propy: string;
   }

   export default class MyTypedComponent extends React.Component<PropFoo> { } //Notice the export default in here
}

React:

import MyTypedComponent from "foo";

function AnotherComponent() {

   /* Since this component is default exported, no need to use the dot operator */
   return <MyTypedComponent /> 
}

Soo, basically, check your exports, default exports, and imports and make sure you are referencing correctly.

I’m very sorry for my English and I hope this helps.

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

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.