framer-motion type error: Property '$$typeof' is missing in type '

[rolanday]

Provide a general summary of the issue here

The code sample for wrapping RAC using motion produces type error.

Sample:
https://react-spectrum.adobe.com/react-aria/styling.html#framer-motion

import {Modal, ModalOverlay} from 'react-aria-components';
import {motion} from 'framer-motion';

// Create Framer Motion wrappers.
const MotionModal = motion(Modal);
const MotionModalOverlay = motion(ModalOverlay);

Error:

 error TS2345: Argument of type '(props: ModalOverlayProps & RefAttributes<HTMLDivElement>) => ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to parameter of type 'string | ForwardRefExoticComponent<ModalOverlayProps & RefAttributes<HTMLDivElement>>'.
  Property '$$typeof' is missing in type '(props: ModalOverlayProps & RefAttributes<HTMLDivElement>) => ReactElement<any, string | JSXElementConstructor<any>> | null' but required in type 'ForwardRefExoticComponent<ModalOverlayProps & RefAttributes<HTMLDivElement>>'.

Codesandbox repro:
https://codesandbox.io/p/sandbox/rf8qdg

🤔 Expected Behavior?

Code sample has no type errors.

Note: This is recent break after updating to latest RAC and framer-motion/motion libs. Issue repros on latest version for framer motion ( "framer-motion": "11.3.17"), in addition to the newly forked motion lib ("motion": "^11.13.1") used by the sandbox sample.

Appears to be typing issue only (otherwise no functional issues afaict), but would be nice to have addressed for clean build or if there is workaround so do not need to ts-ignore.

😯 Current Behavior

Build fails unless ts-ignore type errors

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/sandbox/rf8qdg

Version

1.5

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Hey, I checked the codesandbox, it appears to be mostly empty and no errors. Did you forget to save by any chance? Or how can I reproduce this?

[rolanday]

@snowystinger , thanks for looking into this! :) Yes, it's a mostly empty project -- if you hover over Modal (as part of motion.create(Modal) you should see the type error as shown in the attached screenshot. I also verified can view the same using a private browser session. Thanks!

[nwidynski]

@snowystinger

react-spectrum/packages/@react-types/shared/src/refs.d.ts

Lines 31 to 33 in fee532d

	declare function forwardRef<T, P = {}>(
	render: (props: P, ref: Ref<T>) => ReactElement | null
	): (props: P & RefAttributes<T>) => ReactElement | null;

Is there a reason to type exotics as functions? Otherwise, should likely just be as in @types/react or its equivalent with backwards compatibility in mind:

 declare function forwardRef<T, P = {}>( 
   render: ForwardRefRenderFunction<T, P>
 ): ForwardRefExoticComponent<P & RefAttributes<T>>