Search code examples
reactjsnpm-installantd

unable to find Comment in antd


I want to use the in my react app. I am using the example given as-is but I am getting the error. I am able to use List and Input just fine.

ERROR in ./src/components/Idea/CommentsCard.js 142:37-44
export 'Comment' (imported as 'Comment') was not found in 'antd' (possible exports: Affix, Alert, Anchor, App, AutoComplete, Avatar, BackTop, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Cascader, Checkbox, Col, Collapse, ConfigProvider, DatePicker, Descriptions, Divider, Drawer, Dropdown, Empty, FloatButton, Form, Grid, Image, Input, InputNumber, Layout, List, Mentions, Menu, Modal, Pagination, Popconfirm, Popover, Progress, QRCode, Radio, Rate, Result, Row, Segmented, Select, Skeleton, Slider, Space, Spin, Statistic, Steps, Switch, Table, Tabs, Tag, TimePicker, Timeline, Tooltip, Tour, Transfer, Tree, TreeSelect, Typography, Upload, Watermark, message, notification, theme, version)

I have installed the package

 npm install antd
import { Avatar, Comment, Input, List, Tooltip } from 'antd';


 return (

 
<List
    className="comment-list"
    header={`${data.length} replies`}
    itemLayout="horizontal"
    dataSource={data}
    renderItem={item => (
      <li>
        <Comment
          actions={item.actions}
          author={item.author}
          avatar={ 'https://ui-avatars.com/api/name='+item.author+  '&background=random'}
          content={item.content}
          datetime={item.datetime}
        />
      </li>
    )}
  />

  );

Solution

  • UPGRADE FROM V4 to V5 :

    Move Comment component into @ant-design/compatible.

    so you should import it like this :

    import { Comment } from '@ant-design/compatible';