[Typescript] Redeclaring forwardRef impacts end user

[jrozbicki]

Description

I understand need for this, I've done this in the past myself, but having this in the library code isn't acceptable. This impacts end users type definitions.

src/components/map.tsx

// Redecalare forwardRef to support generics
// https://fettblog.eu/typescript-react-generic-forward-refs/
declare module 'react' {
  function forwardRef<T, P = {}>(
    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
}

For example anyone using shadcn/ui or basically anyone using displayName will now see error:

const Avatar = React.forwardRef<
  React.ElementRef<typeof AvatarPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
>(({ className, ...props }, ref) => (
  <AvatarPrimitive.Root
    ref={ref}
    className={cn(
      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
      className
    )}
    {...props}
  />
));
Avatar.displayName = AvatarPrimitive.Root.displayName;

Property 'displayName' does not exist on type '(props: Omit<AvatarProps & RefAttributes<HTMLSpanElement>, "ref"> & RefAttributes<HTMLSpanElement>) => ReactElement<...> | null'.

Inspecting forwardRef type declaration will point at your code:

Expected Behavior

Do not impact global type declarations for end user.

Steps to Reproduce

1. Install react-map-gl@7.1.0
2. Create component that using forwardsRef
3. Use displayName

Environment

Framework version: react-map-gl@7.1.0
Map library: mapbox-gl@2.15.0
Browser: doesn't matter
OS: doesn't matter

Logs

No response

[jrozbicki]

Workarounds:

1. drop // @ts-expect-error on every .displayName usage until this gets fixed
2. Redeclare forwardRef with it's original react type declaration into

react-map-gl.d.ts

import type {
  ForwardRefExoticComponent,
  ForwardRefRenderFunction,
  PropsWithoutRef,
  RefAttributes,
} from "react";

declare module "react" {
  // eslint-disable-next-line @typescript-eslint/ban-types
  function forwardRef<T, P = {}>(
    render: ForwardRefRenderFunction<T, P>
  ): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
}

[Evanht]

Yeh came here to say the same, I'm also having big problems because of this

[Pessimistress]

Fixed in v7.1.1.