I am currently utilizing nx workspace to build the react ts application.
Below is the library component:
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;
And here is the layout component:
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;
An error occurs in the header component:
JSX element type 'HeaderPublic' does not have any construct or call signatures.ts(2604) Although
<main className="app-main">{children}</main>