JSX元素类型'HeaderPublic‘没有任何构造或调用signatures.ts(2604)

Question

我使用nx workspace来构建react应用程序。

下面是lib组件：

import { ReactElement } from 'react';
import styles from './header-public.module.scss';

export function HeaderPublic(): ReactElement {
  return (
    <div className={styles['container']}>
      <h1>Welcome to HeaderPublic!</h1>
    </div>
  );
}

export default HeaderPublic;

下面是布局组件：

import * as HeaderPublic from '@stonehenge/header-public';
import { ReactElement } from 'react';
import layoutStyle from './layout-public.module.scss';

export function LayoutPublic({ children }: { children: ReactElement }) {
  return (
    <section className={layoutStyle['app-wrapper']}>
      <header className="app-header">
        <HeaderPublic></HeaderPublic>//error
      </header>
      <main className="app-main">{children}</main>
      <footer className="app-footer"></footer>
    </section>
  );
}

export default LayoutPublic;

在标头组件中获取错误，如下所示：

JSX element type 'HeaderPublic' does not have any construct or call signatures.ts(2604)

<main className="app-main">{children}</main>工作。但是头部抛出错误。有人帮我吗？

Answer 1

我像这样导入了组件：

import { HeaderPublic } from '@stonehenge/header-public';而不是

import * as HeaderPublic from '@stonehenge/header-public';现在工作得很好。