Input component's InputProps interface gives no-empty-interface ESLint error

[maryamkhan14]

Hi! I have a NextJS project using TypeScript, and I just installed the Input component. ESLint flags the following line of the generated input.tsx component:

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {}

With the following error: "An interface declaring no members is equivalent to its supertype."
As the error message states, the InputProps interface has no members, which is causing the problem.

**Steps to Reproduce: **

• Install shadcn with all the default options suggested by the installer.
• Run npx shadcn-ui@latest add input
• See the ESLint error on the InputProps interface inside the generated Input component

I'm using npm as my package manager, if it helps. Thanks!

[roshan-gh]

I have the same error for textArea component.

[pedrovrima]

Same for TextArea - Even though they improve readability, it would be better to strip these off to avoid these issues. This errors breaks Vercel's build.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[pedrovrima]

I don't think this should be closed - this issue causes errors on deploying into Vercel (Next 14 - App Router - t3 stack). There should be at least a solution proposed for this (either bypassing Vercel or not causing it at all).

[JackHammer29]

Agreed, still got this issue

[jomarmontuya]

This is still an issue shound't be closed yet

[rokitgg]

Still happening.

Failed to compile.

./src/components/ui/input.tsx
5:18  Error: An interface declaring no members is equivalent to its supertype.  @typescript-eslint/no-empty-interface

Replacing the empty interface with this snippet works for me.

export type InputProps = React.InputHTMLAttributes<HTMLInputElement>

[ZzyzxIsAlreadyTaken]

Same error.

[joywin2003]

I am getting the same issue and I feel it should be fixed ASAP

[alexiscm40]

Hola, el problema se debe a que InputProps se encuentra vacio por lo que el compilador marca el error, ya que no encuentra sentido usarlo. Pueden sustituir el código del componente input por el siguiente
import * as React from "react"
import { cn } from "@/lib/utils"

const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = "Input"

export { Input }

[joziasmartini]

Having the same issue here.

Maybe that's because I installed from @shadcn and not @shadcn-ui in my Next project?

It's what is recommended in the docs.

https://ui.shadcn.com/docs/installation/next

[fonsiheruz]

Hey there,

You can disable the check temporally on .eslintrc.json:

"rules": {
    "@typescript-eslint/no-empty-object-type": "off"
  }

Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

[chk7964]

Hey there,

You can disable the check temporally on .eslintrc.json:

"rules": {
    "@typescript-eslint/no-empty-object-type": "off"
  }

Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules

thats now working