The exported variable 'SAlert' is utilizing the name 'AlertInterface' from an external module

Utilizing the antd alert component (ts) with styled components

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;
  }
`;

view image description here and encountering this error during npm installation:

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

view image description here

Some sources suggest that this issue could be due to import naming, although I've experimented with different imports like:

import {Collapse as MyCollapse} from 'antd';

But the error persists. It seems that antd is not exposing the AlertInterface which is causing the problem.

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

view image description here

  1. Why does antd export interfaces for some components but not others?
  2. What would be the recommended approach to resolving this error? Thank you.
reactjstypescriptantdalert

Answer №1

Here is a solution to prevent interface export duplication:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating intricate structures using TypeScript recursively

When working with Angular and TypeScript, we have the power of generics and Compile-goodness to ensure type-safety. However, when using services like HTTP-Service, we only receive parsed JSON instead of specific objects. Below are some generic methods that ...

javascriptjsontypescriptgenerics

Moving Rows Between AgGrids

Experimenting with the example provided in this link (Dragging Multiple Records Between Grids) within my React application: https://www.ag-grid.com/react-data-grid/row-dragging-to-grid/ I have some inquiries; How can I retrieve the selected rows for the ...

javascriptreactjsag-gridag-grid-angularag-grid-react

Choosing and Duplicating Text in Angular

I'm attempting to give the user the ability to select a paragraph and copy it by clicking a button. However, my current code is not working as expected. I initially tried importing directives but encountered errors, prompting me to try a different met ...

javascripthtmlangulartypescript

Creating HTTP-only cookies within a NextJS middleware

Having an issue with updating access token in my middleware when the current one expires; here's my approach: Generate a new token Send it to an API route which adds the token to its response header. The problem arises when the middleware receives t ...

reactjscookiesnext.jsmiddlewarehttponly

Reactjs - Enhance user experience with seamless master-detail navigation: Ensuring that the master component remains in the same

On my Master Page, I have a list that displays 100 items initially. The user can click on a load more button to append another 100 items to the list. However, as the list grows longer, scrolling through all the items can become tedious. While scrolling th ...

reactjsreact-router

Adding a Personal Signature to a PDF File Utilizing Form Elements in HTML, CSS, and JavaScript

After experimenting with jsPdf and signature pad, I found that adding a signature to a PDF created using forms was possible, but it was challenging to place the signature in the desired location. I am looking for a solution where if I input a PDF that alre ...

reactjssveltejspdfpdflibsignaturepad

How can I inform a parent component in React JS when an event occurs in the child component?

I created a React JS app that consists of a simple hierarchy: ContainingBox wraps two InfoBox components. In this scenario, my goal is to inform the ContainingBox component when something is clicked and which specific InfoBox (identified by label name) has ...

reactjs

React 18 update causes malfunctioning of react-switch-selector component

I'm facing an issue where the component is not rendering. I attempted to start a new project but it still didn't work. Is there a solution to fix this problem or should I just wait for an update from the original repository? Encountered Error: ...

reactjstypescriptnpmreact-hooks

Module 'has-flag' not located

Encountering an error when running "npm run build" on the server. It works fine on my local machine, but I'm getting a 500 response on the server. Node version: 8.0 Npm version: 5.0.3 Error: Cannot find module 'has-flag' at F ...

node.jsreactjsnpm

Having difficulty ensuring DayJs is accessible for all Cypress tests

Currently embarking on a new Cypress project, I find myself dealing with an application heavily focused on calendars, requiring frequent manipulations of dates. I'm facing an issue where I need to make DayJs globally available throughout the entire p ...

javascripttypescriptcypressdayjs

Receiving unexpected results when returning a function within a React hook

I'm currently working on developing a custom React hook that will provide users with a function to execute. This hook is designed to generate a function internally. Check out this simplified example // fetch.js import { useEffect, useState} from &qu ...

javascriptreactjsreact-hooks

What is the command to determine the version of TypeScript being used in the command line interface (CLI)?

I recently added TypeScript 1.7.4 using Visual Studio 2015, and it appears correctly installed within the IDE. However, when I check the version using tsc --version in the command line, it shows a different, older version - 1.0.3.0 instead of 1.7.4. Is t ...

visual-studiotypescript

The transition effect is not activated when using the MUI Drawer with react-router-dom

My goal was to merge the persistent drawer similar to the example on the MUI website with react-router-dom. However, I encountered a problem where the transition effect no longer seems to work properly. The paragraph does not resize to accommodate the open ...

javascriptreactjsmaterial-uireact-router-dom

The React useState Props error message TS2322: Cannot assign type 'string' to type 'number'

I'm attempting to pass Props to React useState Hooks. Both of my props are required and should be numbers, but I keep receiving a Typescript error stating: Type 'string' is not assignable to type 'number'. TS2322 However, I am ...

typescriptuse-statereact-typescript

Issues with the execution of Typescript decorator method

Currently, I'm enrolled in the Mosh TypeScript course and came across a problem while working on the code. I noticed that the code worked perfectly in Mosh's video tutorial but when I tried it on my own PC and in an online playground, it didn&apo ...

javascripttypescriptvisual-studio-codemethodsoutput

The componentDidMount function is not initializing the state

I am trying to access the references from the render function and then set them to the state. Below is my code snippet: class App extends Component { constructor(props) { super(); this.arr = this.generateTimelineArray(); ...

javascriptreactjsstate

Disable Autocomplete Chip functionality when only one can be selected

When multiple is set to true, I prefer the Chip option. Is there a way to enable the Chip functionality even when multiple is set to false? <Autocomplete className={classes.search} options={top100Films} ge ...

javascriptreactjsmaterial-ui

Steps for mandating the specification of a type parameter for a generic React component

When setting up a new instance of a generic React component, I noticed that the TypeScript type checker automatically defaults to unknown without requiring me to specify the type argument: Ideally, I would prefer if TypeScript prompted for the explicit ty ...

reactjstypescriptgenerics

Step-by-step guide on uploading an image file using Nextjs

I am attempting to achieve the following: Upload an image file to a Next.js application Process it using cjwbw/real-esrgan:d0ee3d708c9b911f122a4ad90046c5d26a0293b99476d697f6bb7f2e251ce2d4 Retrieve the enhanced version of the image Is there anyone who can ...

reactjstypescriptnext.jsreplicate

The scroll animation feature was not functioning properly in Next.js, however, it was working flawlessly in create react app

I recently transitioned a small project from Create React App (CRA) to Next.js. Everything is working as expected except for the scroll animations in Next.js, which are not functioning properly. There are no errors thrown; the animations simply do not occ ...

javascriptreactjstypescriptnext.jstailwind-css