jsx element type ... does not have any construct or call signatures Ошибка

Возможные причины

1. Это вообще не компонент

Ошибка может возникать когда мы пытаемся использовать какое-то имя (переменную), которое не является JSX-компонентом, как такой компонент. Или приведим переменную к такому типу (typescript as), который не является компонентом.

2. Typescript: вы неверно определяете тип перемеено

Возможно вы неверно определяете тип переменной, в которой ожидаете компонент, например, вариант:


export interface ConfigElement {
    id: 'A' | 'B' | "C";
    label: string;
    component:
       React.Component<Omit<ConfigElement, 'component'>>;
  }

  export interface SomeMainComponentProps {
    elements: ConfigElement[];
  }
  
  export function SomeMainComponent({ elements }: SomeMainComponentProps) {

    return (
      <>
        {elements.map(({ id, label, component: FilterElement}) => {
          return (
            <FilterElement
              id={id}
              key={Array.isArray(id) ? (id[0] as string) : (id as string)}
              label={label}
            />
          );
        })}
      </>
    );
  }

Надо заменить на:



export interface ConfigElement {
    id: 'A' | 'B' | "C";
    label: string;
    component:
       React.ComponentClass<Omit<ConfigElement, 'component'>>;
  }

  export interface SomeMainComponentProps {
    elements: ConfigElement[];
  }
  
  export function SomeMainComponent({ elements }: SomeMainComponentProps) {

    return (
      <>
        {elements.map(({ id, label, component: FilterElement}) => {
          return (
            <FilterElement
              id={id}
              key={Array.isArray(id) ? (id[0] as string) : (id as string)}
              label={label}
            />
          );
        })}
      </>
    );
  }

-- см. подробнее об отличиях React.ComponentClass и React.Component
и о том как использовать обобщенный тип для функциональных и классовых компонентов.

Key Words for FKN + antitotal forum (CS VSU):