打字稿：未找到导出/JSX 元素类型没有任何构造或调用签名答案

【问题标题】：Typescript: export was not found / JSX element type does not have any construct or call signatures打字稿：未找到导出/JSX 元素类型没有任何构造或调用签名
【发布时间】：2020-07-18 01:36:27
【问题描述】：

我想将我的 Typescript React 组件库用作一个包。

我的文件如下所示：

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';

我没有错误并且可以使用该组件。然后我运行tsc 和declaration: true。然后我将我的 dist 文件夹发布到 npm。

当我在另一个项目中安装包时，我会这样使用它：

import MyComponent from 'my-package';

在构建项目时出现以下错误：

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

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

我试试

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

和

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

但它也不起作用。唯一的解决方案是在新项目中导入这样的组件：

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

但我想以索引文件的方式使用它。有人可以帮帮我吗？

非常感谢！

【问题讨论】：

标签： reactjs typescript npm package

【解决方案1】：

我很笨。

我必须像这样使用这个包：

import { MyComponent } from 'my-package';

这当然有效:)

【讨论】：

【解决方案2】：

您可以使用object destructuring。

使用此代码

import { MyComponent } from 'my-package';

代替

import MyComponent from 'my-package';

【讨论】：