AntD组件报错：JSX元素类型‘Card’无构造或调用签名求助

用户代码示例：

import { Card, Col, Row } from 'antd';
import './App.css';
import React from 'react';

function App() {
  return (
    <Row gutter={16}>
      <Col span={8}>
        <Card title="Card title" bordered={false}>
          Card content
        </Card>
      </Col>
    </Row>
  );
}

export default App;

报错信息：

AntD Error: JSX element type 'Card' does not have any construct or call signatures

解决方案： #

• 检查依赖版本兼容性

  • 确认React版本符合AntD要求：AntD v5需要React 16.8.0+，v4需要React 16.0.0+
  • 若使用TypeScript，AntD v5自带类型定义，无需额外安装@types/antd；如果是AntD v4，确保@types/antd版本与AntD主版本完全一致

• 修正导入语句
  尝试替换导入路径为具体组件入口，避免树摇或导出映射问题：

  import { Card, Col, Row } from 'antd/es/card';
  // 或分开导入
  import Card from 'antd/es/card';
  import { Col, Row } from 'antd';
  

• 调整TypeScript配置
  在tsconfig.json中添加或修改以下配置：

  {
    "compilerOptions": {
      "moduleResolution": "node",
      "target": "ES6",
      "skipLibCheck": true // 跳过库类型检查，避免第三方类型冲突
    }
  }
  

• 清除缓存并重新安装依赖
  执行以下命令清理缓存和依赖：

  # 删除依赖包和锁文件
  rm -rf node_modules package-lock.json yarn.lock
  # 重新安装依赖
  npm install
  # 重置React项目缓存
  npm start -- --reset-cache
  

• 重置编辑器TypeScript服务
  如果使用VS Code，按Ctrl+Shift+P打开命令面板，选择TypeScript: Restart TS Server，清除编辑器缓存的类型信息

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