Typescript: export was not found / JSX element type does not have any construct or call signatures

Question

I want to use my Typescript React Component Library as a Package.

My files looks like this:

MyComponent.tsx:

import React, { FunctionComponent } from 'react';
import styled from 'styled-components';

export interface IProps {
 prop1: boolean;
}

const HeaderWrapper = styled.div`
  width: 100vw;
`;

const MyComponent: FunctionComponent<IProps> = ({prop1}: IProps) => (
  <HeaderWrapper prop1={prop1}><h1>Test</h1></HeaderWrapper>
);

export default MyComponent;

index.ts

export * from './components/MyComponent';

I have no errors and can use the component. Then I run tsc with declaration: true. And then I publish my dist folder to npm.

When I install the package in another project I use it like that:

import MyComponent from 'my-package';

When I am building the project I get following error:

export 'default' (imported as 'MyComponent') was not found in 'my-package'

&

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

I try

'export {default as MyComponent} from './components/MyComponent';

and

'export * as MyComponent from './components/MyComponent';

But it also doesn't work. The only solution was to import the component like that in the new project:

import MyComponent from 'my-package/dist/components/MyComponent';

But I want to use it the way with the index file. Can somebody help me please?

Thank you so much!

Answer 1

I am very dumb.

I have to use the package like this:

import { MyComponent } from 'my-package';

Of course this works :)

Answer 2

You can use object destructuring.

Use this code

import { MyComponent } from 'my-package';

Instead of

import MyComponent from 'my-package';