adobe / adobe/react-spectrum

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

Open
#7,494 3 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### 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) => ReactElement> | null' is not assignable to parameter of type 'string | ForwardRefExoticComponent>'.
Property '$$typeof' is missing in type '(props: ModalOverlayProps & RefAttributes) => ReactElement> | null' but required in type 'ForwardRefExoticComponent>'.
```

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](https://codesandbox.io/p/sandbox/rf8qdg) 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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.