An interface declaring no members is equivalent to its supertype. @typescript-eslint/no-empty-object-type

Question

I built a nextjs project, facing an error when want to deploy it to vercel.like below:

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

I use google and chatgpt to try many method but still failed, such as : // eslint-disable-next-line @typescript-eslint/no-empty-interface or add rules below :

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

both unavailablbe. the error is in the page below, any one can help will be high appreciated.

/* eslint-disable @typescript-eslint/no-empty-interface */
import * as React from "react"

import { cn } from "@/lib/utils"

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

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ 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 }

Twin Edo · Accepted Answer · 2024-10-02 17:27:19Z

28

You can change on

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

to

export type InputProps = React.InputHTMLAttributes<HTMLInputElement>

answered Oct 2, 2024 at 17:27

Twin Edo

2812 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yan Zhang Over a year ago

it works, thanks

Thoxh Over a year ago

worked for me as well thanks buddy

Twin Edo Over a year ago

@Thoxh YanZhang your welcome

michaelrbock · Accepted Answer · 2024-11-06 06:03:44Z

10

Go to the .eslintrc.json file and configure it like this:

{
  "extends": ["next/core-web-vitals", "next/typescript"],
  "rules": { "@typescript-eslint/no-empty-object-type": "off" }
}

in order to turn off the offending rule.

edited Nov 6, 2024 at 6:03

michaelrbock

1,3201 gold badge13 silver badges21 bronze badges

answered Oct 11, 2024 at 6:21

mohammad hooshmand

1013 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Борисов Максим Over a year ago

It is mentioned in the Next.js documentation here: nextjs.org/docs/pages/building-your-application/configuring/…

Julian Re · Accepted Answer · 2024-10-09 12:54:41Z

4

i fixed it adding this to the rules object "@typescript-eslint/no-empty-object-type": "off"

answered Oct 9, 2024 at 12:54

Julian Re

411 bronze badge

Comments

Moshe Fortgang · Accepted Answer · 2024-12-02 15:55:51Z

0

You can add the following to your .eslintignore file to fix the issue:

/components/ui/**.tsx

This will exclude all .tsx files in the components/ui directory from linting.

answered Dec 2, 2024 at 15:55

Moshe Fortgang

1,2109 silver badges23 bronze badges

1 Comment

rimoslav Aug 12 at 8:06

You shouldn't disable linter on a whole directory because of one rule in one file that causing you issues. You can disable that one rule only for that line only, or that one rule for the whole file if the issue occurs on multiple places. But to disable all rules for all files in one directory is shooting yourself in the foot. In this specific case converting interface to type solves the issue without disabling any rules. In case of d.ts files and declarations, you can disable the rule per-line basis or for the whole file.

Arjun · Accepted Answer · 2025-02-27 10:21:29Z

Had the same error found some ways to solve it. Not an expert with eslint but here is what I found.

The error is a linting error from @typescript-eslint/no-empty-object-type which prevents empty type in the codebase.

Example:

type MyType = {}; // ❌ Useless type, can be removed

function doSomething(config: {}) { // ❌ What properties does this object have?
  console.log(config);
}

It just prevents this behaviour, but it doesn't have any actual use, like preventing a bug or something, so it's alright if you turn it off. I found two ways to turn it off.

eslint.config.ts

You can just disable it from your eslint config by adding this line.

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

This will disable it which in your case will be more useful.

eslint-disable

If like me you are just having this error in one file, For example, I was having this error in my env.d.ts file where I add type from a zod scheme to global ProcessEnv type.

declare global {
  namespace NodeJS {
    interface ProcessEnv extends EnvSchemaType { } // ❌ here
  }
}

In this case, like me, if you don't want to disable @typescript-eslint/no-empty-object-type everywhere just add the following line at the top of your file.

/* eslint-disable @typescript-eslint/no-empty-object-type */

Collectives™ on Stack Overflow

An interface declaring no members is equivalent to its supertype. @typescript-eslint/no-empty-object-type

5 Answers 5

3 Comments

2 Comments

Comments

1 Comment

eslint.config.ts

eslint-disable

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

2 Comments

Comments

1 Comment

eslint.config.ts

eslint-disable

Comments

Your Answer

Sign up or log in

Post as a guest

Related