TypeScript报错：JSX元素'Logo'无构造或调用签名的排查与解决

问题背景 #

在另一项目中使用设计系统包的Logo组件时遇到TypeScript错误，组件导入路径看似正确，但TypeScript不将其识别为合法React组件，期望Logo组件能被正确识别并渲染，无TypeScript错误。

设计系统中的Logo组件代码 #

import React from 'react';
import { styles } from "./Logo.styles";

type LogoProps = {
    variant: "colored" | "white";
};

const Logo: React.FC<LogoProps> = ({ variant }) => {
    const logoSrc =
        variant === "white"
            ? "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
            : "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg";

    return (
        <div css={styles.logoStyle}>
            <img css={styles.logoImage} src={logoSrc} alt="Logo" />
        </div>
    );
};

export default Logo;

项目中使用Logo组件的代码 #

在设计系统执行build和pack生成.tgz文件后，在另一项目安装并使用：

import React from 'react';
import Logo from '@ui-kit';

const HeaderV2: React.FC = () => {
    return (
        <>
            <Logo variant="white" />
        </>
    );
};

出现错误：JSX element type 'Logo' does not have any construct or call signatures

错误原因 #

1. 设计系统包的导出配置缺失/错误

   • package.json中未正确配置main、types等核心字段，或字段指向的文件路径无效，导致TypeScript无法读取组件的类型定义，无法识别其为React组件。
   • 构建工具配置问题，导致默认导出在打包产物中丢失，使得导入的内容并非预期的React组件。

2. 导入路径与包的导出结构不匹配

   • import Logo from '@ui-kit' 假设包的根默认导出就是Logo组件，但如果设计系统的根入口文件未将Logo作为默认导出暴露，就会导致导入内容不符合预期。

解决方法 #

1. 修正设计系统的package.json配置 #

确保核心字段配置正确，示例如下：

{
  "name": "@ui-kit",
  "main": "dist/index.js", // 指向构建后的主入口文件
  "types": "dist/index.d.ts", // 必须指向生成的类型定义文件
  "files": ["dist"] // 指定打包后包含的文件目录
}

同时确认设计系统的根入口文件（如src/index.ts）正确导出Logo：

import Logo from './components/Logo';
export default Logo;

2. 确保TypeScript类型定义正确生成 #

• 若使用tsc编译，在tsconfig.json中开启类型声明生成：

  {
    "compilerOptions": {
      "declaration": true,
      "declarationDir": "dist",
      // 其他编译配置...
    }
  }
  

• 若使用Rollup、Vite等工具，需配置对应插件（如@rollup/plugin-typescript、vite-plugin-dts），确保类型定义文件被输出到dist目录。

3. 调整导入路径匹配导出结构 #

如果设计系统包包含多个组件，根入口未默认导出Logo，需修改导入路径：

// 假设Logo组件在包的components目录下
import Logo from '@ui-kit/components/Logo';

4. 重新构建并安装包 #

• 在设计系统项目中重新执行build和pack命令，确保最新配置和代码被打包。
• 在使用项目中删除node_modules和锁文件（package-lock.json/yarn.lock），重新安装设计系统包，清除缓存。

内容的提问来源于stack exchange，提问作者INo