Exported variable 'SAlert' has or is using name 'AlertInterface' from external module

Question

I'm using antd alert component (ts) with styled component

import styled from 'styled-components';
import Alert from 'antd/es/alert';
    
export const SAlert = styled(Alert)`
  && {
    margin-bottom: 24px;
    border-radius: 14px;
    border: 0;
    padding: 8px 12px;
  }
`;

enter image description here and on npm i getting following error:

 Exported variable 'SAlert' has or is using name 'AlertInterface' from external module

enter image description here

In some articles I've read that it's because of the import name but I've imported different ways. e.g

import {Collapse as MyCollapse} from 'antd';

and still got the same error I see that antd is not exporting AlertInterface and this is causing the issue.

interface AlertInterface extends React.FC<AlertProps> {
    ErrorBoundary: typeof ErrorBoundary;
}
declare const Alert: AlertInterface;

enter image description here

1. Can you tell me why antd is not exporting interface for some components and does for others?
2. What is the best way to solve this error? Thanks

Answer 1

This is the solution to not duplicate interface export:

    import { ComponentType } from 'react';
    import { AlertProps } from 'antd/es/alert';

     export const SAlert = styled<ComponentType(AlertProps)>(Alert)`
      && {
        margin-bottom: 24px;
        border-radius: 14px;
        border: 0;
        padding: 8px 12px;
      }`;