Question 73026 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React + Typescript + MUI type error – No overload matches this call on MUI icon import – Reactjs

I have a component that imports:

import LogoutIcon from "@mui/icons-material/Logout";
import useLogout from "@/hooks/auth/useLogout";

const { trigger: logoutTrigger } = useLogout();

But where I use this component is here:

            <LogoutIcon
              type="button"
              onClick={logoutTrigger}
              sx={LogoutIconSx}
              cursor="pointer"
            />

And it all gets highlighted with the following error:

(property) onClick: <SWRData = any>(extraArgument?: null | undefined, options?: SWRMutationConfiguration<any, any, never, "/logout", SWRData> | undefined) => Promise<any>
No overload matches this call.
  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "inherit" | ... 8 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>): Element | null', gave the following error.
Property 'component' is missing in type '{ type: string; onClick: <SWRData = any>(extraArgument?: null | undefined, options?: SWRMutationConfiguration<any, any, never, "/logout", SWRData> | undefined) => Promise<...>; sx: SxProps<...>; cursor: string; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element | null', gave the following error.
    Type '<SWRData = any>(extraArgument?: null | undefined, options?: SWRMutationConfiguration<any, any, never, "/logout", SWRData> | undefined) => Promise<any>' is not assignable to type 'MouseEventHandler<SVGSVGElement>'.
Types of parameters 'extraArgument' and 'event' are incompatible.
        Type 'MouseEvent<SVGSVGElement, MouseEvent>' is not assignable to type 'null | undefined'.ts(2769)
OverridableComponent.d.ts(21, 7): 'component' is declared here.
index.d.ts(1484, 9): The expected type comes from property 'onClick' which is declared here on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "inherit" | "disabled" | ... 7 more ... | undefined; ... 6 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'

And here I have the hook:

const cookies = new Cookies();

const fetcher = (url: string) => axios.post(url).then((res) => res.data);

export default function useLogout() {
  const router = useRouter();

  const { trigger, error } = useSWRMutation("/logout", fetcher, {
    onSuccess: () => {
      cookies.remove(ACCESS_TOKEN_COOKIE_NAME);
      router.push("/login");
    },
  });

  return {
    trigger,
    error,
  };
}

I’ve noticed that if I change onClick={logoutTrigger} to onClick={() => console.log(test} the problem disappears.

Also if I set as any onClick={logoutTrigger as any} the error disappears, but I want to avoid type casting.

P.s. I am using MUI v5

Why am I getting this error? How to fix it?

Tags:

2

Answers


  1. 0

    The most likely issue is that onClick event handler is trying to pass event object as an argument into the logoutTrigger function which doesn’t accept event object as an argument.

    Please try the following code, it might help:

    <LogoutIcon
  type="button"
  onClick={() => logoutTrigger()}
  sx={LogoutIconSx}
  cursor="pointer"
/>
    Login or Signup to reply.
  2. 0

    when onClick is invoked you are trying to pass its parameters into the trigger function.

    you can imagine it like this:

    trigger(onClickArgs); // that's why typescript indicates that there is no match to the function call.

    To solve it you need to use the inline syntax:

    onClick={() => trigger()}

    In that way you are ignoring onClick supplied args and use the trigger without adding any parameters

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search