CODEWITHSUNDEEP
next.jsdeploymentverceltypescript-eslint
Yan Zhang
Yan Zhang

Reputation: 383

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

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 }

Upvotes: 5

Views: 7295

Answers (5)

Arjun
Arjun

Reputation: 11

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 */

Upvotes: 0

Moshe Fortgang
Moshe Fortgang

Reputation: 1150

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.

Upvotes: 0

mohammad hooshmand
mohammad hooshmand

Reputation: 101

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.

Upvotes: 10

Julian Re
Julian Re

Reputation: 41

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

Upvotes: 4

Twin Edo
Twin Edo

Reputation: 231

You can change on

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

to

export type InputProps = React.InputHTMLAttributes<HTMLInputElement>

Upvotes: 23

Related Questions