How to use the newer versions of motion with third party components

[manuelpoelzl]

Hi,
In previous versions of the library it was possible to enable animations for custom and third party components.
I've previously used the following logic in combination with the PrimeReact framework:

import { Card } from "primereact/card";
import { motion, Variants } from "framer-motion";


const MotionCard = motion(Card);

However since a couple of version this results in the following error:
TS2345: Argument of type typeof Card is not assignable to parameter of type string | ForwardRefExoticComponent<unknown>

Apparently now a component with forwardRef is needed to make this work.
I was wondering is there a way to use the components provided by e.g. PrimeReact without creating a wrapper component around it?

[mattgperry]

forwardRef was always required to work - I wonder though if the types have changed? Card should be forwarding its ref but maybe it’s typed in an incompatible manner. How’s it if you use the new motion.custom()?

[manuelpoelzl]

It seems like there is no motion.custom available:

I just tried an old version and the newest one of PrimeReact - the new version of motion fails with both.
framer-motion version 11.3.31 was the last version where motion(Card) worked