ESLint: 'className' is missing in props validation(react/prop-types)

[1August]

When using ESLint you can get error "ESLint: 'className' is missing in props validation(react/prop-types)". Just need to add interface that extends React.HTMLAttributes. Was:

const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>> (({ className /* warning is here */, ...props }, ref) => (...))

Should be: interface CardProps extends React.HTMLAttributes<HTMLDivElement> {}

const Card = React.forwardRef<HTMLDivElement, **CardProps**> (({ className, ...props }, ref) => (...))

[seongsoo96]

every shadcn-ui components got error of react.prop-types. so i add "react/prop-types": [2, { "ignore": "className" }], to my rule of .eslintrc. After that we don't need to add extra interface every shadcn-ui components.

if there is any better way, mention me please!

[bbc-buers]

[...] so i add "react/prop-types": [2, { "ignore": "className" }], to my rule of .eslintrc [...]

Just as a side note, the value of ignore is supposed to be an array, e.g. "ignore": ["className"]

[GOWxx]

Add this content to the eslint configuration file

module.exports = {
// ...
  overrides: [
    // React
    {
      files: ["**/*.{js,jsx,ts,tsx}"],
      // ...
      rules: {
        "react/prop-types": [2, {
          "ignore": ["className", 
                            // "variant", 
                            // "size",
                            // ...
                           ]
        }]
      }
    },
  // ...
  ],
};

Reference document: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md#rule-options

[fernandocanizo]

every shadcn-ui components got error of react.prop-types. so i add "react/prop-types": [2, { "ignore": "className" }], to my rule of .eslintrc. After that we don't need to add extra interface every shadcn-ui components.

if there is any better way, mention me please!

Ignoring a rule to shut up a valid Typescript error is not a fix, if we are going to start ignoring whatever makes noise, then just let's take out Eslint and Typescript from our projects.

The proper way to fix it is to define the className or any other parameter in the type definitions where it's required.

Something along this pattern:

export default function DatePickerWithRange({
  className,
}: React.HTMLAttributes<HTMLDivElement> & {
  className?: string
}) {
// ...

It would be better if this could be addressed at the library level, as I've seen this error in many components.

[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.

[driera]

This is still happening. Importing HTMLAttributes type from react and using it solves the issue though:

import * as React from "react";
import type { HTMLAttributes } from "react";

const Card = React.forwardRef<
  HTMLDivElement, HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
// ...

[benrbowers]

My suggestion is to turn off "react/prop-types", but ONLY for shadcn/ui

Add to eslint config:

module.exports = {
  overrides: [
    ...,
    // shadcn/ui
    {
      files: ['app/shadcn/ui/**/*.{ts,tsx}'],
      rules: {
	"react/prop-types": 'off'
      }
    }
  ]
};