jsx-eslint / eslint-plugin-react

React-specific linting rules for ESLint
MIT License
8.97k stars 2.77k forks source link

[help wanted] The functions option (defaultArguments) in the react/require-default-props rule does not work as expected. #3738

Closed amisu1203 closed 4 months ago

amisu1203 commented 5 months ago

Is there an existing issue for this?

Description Overview

i set the react/require-default-props rules with functions - defaultArguments option. but i got an error that propType "asChild" is not required, but has no corresponding defaultProps declaration. in my shadcn/ui 'breadcrumb' component.

// breadcrumb.tsx
const BreadcrumbLink = React.forwardRef<
  HTMLAnchorElement,
  React.ComponentPropsWithoutRef<"a"> & {
    asChild?: boolean;
  }
>(({ asChild = false, className, ...props }, ref) => {
  const Comp = asChild ? Slot : "a";

  return (
    <Comp
      ref={ref}
      className={cn("transition-colors hover:text-foreground", className)}
      {...props}
    />
  );
});

// .eslintrc.json
{
   "rules": {
      "react/react-in-jsx-scope": "off",
      "react/jsx-props-no-spreading": "off", 
      "react/require-default-props": [2, { "functions" : "defaultArguments" }],
    },
    "overrides": [
      {
        "files": ["**/components/ui/*.tsx"], 
        "rules": {
          "react/prop-types": [2, { "ignore": ["className","sideOffset","checked"] }]
        }
      }
    ]
}

what should i do for resolve this problem?

Expected Behavior

.

eslint-plugin-react version

v7.34.1

eslint version

v8.57.0

node version

v20.11.0

ljharb commented 4 months ago

This is because forwardRef doesn't take a component - function components take props, context and forwardRef callbacks take props, ref.