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

Posted 2023-03-13

【中文标题】打字稿：未找到导出/JSX 元素类型没有任何构造或调用签名

【英文标题】：Typescript: export was not found / JSX element type does not have any construct or call signatures

【发布时间】：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';

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

非常感谢！

【参考方案1】：

我很笨。

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

import  MyComponent  from 'my-package';

这当然有效:)

【参考方案2】：

您可以使用object destructuring。

使用此代码

import  MyComponent  from 'my-package';

代替

import MyComponent from 'my-package';