(TS2769) No Overload match with Styled-Components

[TylerAPfledderer]

Hey all!

This 'No overload ' is super long to me, and I do not have enough experience in knowing how to handle it.

Button component file:

import * as React from 'react';
import S from './Button.styles';
import { useButton, useLink } from 'react-aria';
interface BaseProps {
  variant?: null | 'primary' | 'youtube' | 'spotify' | 'soundcloud';
  children: React.ReactNode;
  path?: string;
}
export interface InternalLinkProps extends BaseProps {
  internalLink: boolean;
}

export interface FormButtonProps extends BaseProps {
  type: 'submit' | 'reset';
  formButton: boolean;
}

export interface ExternalLinkProps extends BaseProps {
  target: '_blank';
}

export type ButtonProps =
  | InternalLinkProps
  | FormButtonProps
  | ExternalLinkProps;

const Button = (
  props: InternalLinkProps | FormButtonProps | ExternalLinkProps
) => {
  const formButtonRef = React.useRef(null);
  const externalLinkRef = React.useRef(null);

  const { buttonProps: formBtnProps } = useButton(props, formButtonRef);
  const { linkProps } = useLink(props, externalLinkRef);

  const { children } = props;
  const { internalLink } = props as InternalLinkProps;
  const { formButton } = props as FormButtonProps;
  const { path } = props as ExternalLinkProps | InternalLinkProps;

  if (internalLink) {
    return <S.InternalLink to={path}>{children}</S.InternalLink>;
  } else if (formButton) {
    return (
      <S.Button {...props} ref={formButtonRef} {...formBtnProps}>
        {children}
      </S.Button>
    );
  } else {
    return (
      <S.ExternalLink // <== ERROR OCCURS HERE
        href={path}
        target='_blank'
        {...props}
        ref={externalLinkRef}
        {...linkProps}
      >
        {children}
      </S.ExternalLink>
    );
  }
};

export default Button;

Button Styles JS file:

import * as React from 'react';
import { ButtonProps } from './index';
import { Link } from 'gatsby';
import tw, { styled, css } from 'twin.macro';

const baseStyles = css<ButtonProps>`
  ${tw`font-bold inline-block border-4 border-transparent border-solid cursor-pointer px-5 py-4 text-md`}
  ${({ variant }) =>
    variant
      ? tw`font-buttons transition-property['background-color'] duration-300 active:transition-none`
      : tw`font-body hover:underline`}
  ${({ variant }) =>
    variant === 'primary' &&
    tw`bg-primary rounded-md hover:bg-primary-light text-white active:bg-primary-dark`};
  ${({ variant }) => variant !== 'primary' && tw`rounded-full`};
  ${({ variant }) =>
    variant === 'youtube' &&
    tw`border-yt-color hover:bg-yt-color hover:text-white active:bg-yt-color-dark active:border-yt-color-dark`};
  ${({ variant }) =>
    variant === 'spotify' &&
    tw`bg-spotify-color hover:bg-spotify-color-light active:bg-spotify-color-dark active:text-white`};
  ${({ variant }) =>
    variant === 'soundcloud' && tw`bg-sc-color  hover:bg-sc-color-light`};
`;

const S = {
  Button: styled.button`
    ${baseStyles}
  `,
  InternalLink: styled((props) => <Link {...props} />)`
    // Solution for connecting Gatsby Link to styled component: https://stackoverflow.com/a/49639062
    ${baseStyles}
  `,
  ExternalLink: styled.a`
    ${baseStyles}
  `,
};

export default S;

The TS Error:

No overload matches this call.
  Overload 1 of 2, '(props: ((Omit<Omit<Pick<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof AnchorHTMLAttributes<...>> & { ...; } & InternalLinkProps, never> & Partial<...>, "theme"> & { ...; }) | (Omit<...> & { ...; }) | (Omit<...> & { ...; })) & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children: ReactNode; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 258 more ...; target: "_blank"; } | { ...; } | { ...; }' is not assignable to type 'IntrinsicAttributes<T> & (((Omit<Omit<Pick<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof AnchorHTMLAttributes<...>> & { ...; } & InternalLinkProps, never> & Partial<...>, "theme"> & { ...; }) | (Omit<...> & { ...; }) | (Omit<...> & { ...; })) & { ...; })'.
      Type '{ children: ReactNode; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 258 more ...; target: "_blank"; }' is not assignable to type 'IntrinsicAttributes<T> & (((Omit<Omit<Pick<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof AnchorHTMLAttributes<...>> & { ...; } & InternalLinkProps, never> & Partial<...>, "theme"> & { ...; }) | (Omit<...> & { ...; }) | (Omit<...> & { ...; })) & { ...; })'.
        Type '{ children: ReactNode; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 258 more ...; target: "_blank"; }' is not assignable to type 'IntrinsicAttributes<T>'.
          Types of property 'css' are incompatible.
            Type 'CSSProp<any> | undefined' is not assignable to type 'InterpolationWithTheme<any>'.
              Type 'FlattenInterpolation<ThemeProps<any>>' is not assignable to type 'InterpolationWithTheme<any>'.
                Type 'readonly Interpolation<ThemeProps<any>>[]' is not assignable to type 'ObjectInterpolation<undefined>'.
                  Types of property 'filter' are incompatible.
                    Type '{ <S extends Interpolation<ThemeProps<any>>>(predicate: (value: Interpolation<ThemeProps<any>>, index: number, array: readonly Interpolation<ThemeProps<any>>[]) => value is S, thisArg?: any): S[]; (predicate: (value: Interpolation<...>, index: number, array: readonly Interpolation<...>[]) => unknown, thisArg?: any):...' is not assignable to type 'string | string[] | undefined'.
                      Type '{ <S extends Interpolation<ThemeProps<any>>>(predicate: (value: Interpolation<ThemeProps<any>>, index: number, array: readonly Interpolation<ThemeProps<any>>[]) => value is S, thisArg?: any): S[]; (predicate: (value: Interpolation<...>, index: number, array: readonly Interpolation<...>[]) => unknown, thisArg?: any):...' is missing the following properties from type 'string[]': pop, push, concat, join, and 25 more.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<"a", any, InternalLinkProps | FormButtonProps | ExternalLinkProps, never, "a">): ReactElement<...>', gave the following error.
    Type '{ children: ReactNode; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 258 more ...; target: "_blank"; } | { ...; } | { ...; }' is not assignable to type 'IntrinsicAttributes<T> & StyledComponentPropsWithAs<"a", any, InternalLinkProps | FormButtonProps | ExternalLinkProps, never, "a">'.
      Type '{ children: ReactNode; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 258 more ...; target: "_blank"; }' is not assignable to type 'IntrinsicAttributes<T> & StyledComponentPropsWithAs<"a", any, InternalLinkProps | FormButtonProps | ExternalLinkProps, never, "a">'.
        Type '{ children: ReactNode; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; suppressContentEditableWarning?: boolean | undefined; ... 258 more ...; target: "_blank"; }' is not assignable to type 'IntrinsicAttributes<T>'.
          Types of property 'css' are incompatible.
            Type 'CSSProp<any> | undefined' is not assignable to type 'InterpolationWithTheme<any>'.

The error occurs at <S.ExternalLink> once I spread in linkProps from the useLink.

I would greatly appreciate any assistance deciphering this! 😁

[snowystinger]

All we do is return HTMLAttributes<HTMLElement>
Seems like it conflicts with css<ButtonProps> possibly? specifically over the property of filter. I'm not familiar with twin.macro though, so I don't really know what's going on here. I might ask in their discord why they don't match that or dig into their types. Just to speed up you finding a solution.
Feel free to link them here too.