[BUG] Types error with motion.create() in v11.5

[hoangnhan2ka3]

1. Read the FAQs 👇

2. Describe the bug

Types error with motion.create() in v11.5

3. Reproduction

NaN

4. Steps to reproduce

Steps to reproduce the behavior:

• First case:

  // src/components/ui/badge.tsx
  
  import { cva, type VariantProps } from "class-variance-authority"
  import { cn } from "@/lib/utils"
  
  const badgeVariants = cva(
      "inline-flex w-fit cursor-pointer items-center rounded-full border px-1.5 text-mini font-bold transition-colors focus:outline-none",
      {
          variants: {
              variant: {
                  default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80"
              }
          },
          defaultVariants: {
              variant: "default"
          }
      }
  )
  
  type BadgeProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>
  
  const Badge = ({ className, variant, ...props }: BadgeProps) => {
      return (
          <div
              className={cn(badgeVariants({ variant }), className)}
              {...props}
          />
      )
  }
  Badge.displayName = "Badge"
  
  export { Badge, badgeVariants }

  // in other file
  
  "use client"
  
  import { motion } from "framer-motion"
  import { Badge } from "@/components/ui/badge"
  
  const MotionBadge = motion.create(Badge)
  //                                ^^^^^ (Types error)

  Error:

  Argument of type '{ ({ className, variant, ...props }: BadgeProps): React.JSX.Element; displayName: string; }' is not assignable to parameter of type 'string | ForwardRefExoticComponent<BadgeProps>'.
    Property '$$typeof' is missing in type '{ ({ className, variant, ...props }: BadgeProps): React.JSX.Element; displayName: string; }' but required in type 'ForwardRefExoticComponent<BadgeProps>'.ts(2345)
  index.d.ts(636, 18): '$$typeof' is declared here.

• Second case:

  import { Slot as ReactSlot } from "@radix-ui/react-slot"
  import { motion, type MotionProps } from "framer-motion"
  
  export interface SlotProps extends React.ComponentPropsWithoutRef<typeof ReactSlot> {
      as?: keyof React.ReactHTML | React.ComponentType<any>,
      asChild?: boolean
  }
  
  const MotionSlot = React.forwardRef<HTMLElement, SlotProps & MotionProps>(({
      as: Component = "div",
      asChild = false,
      className,
      ...props
  }, ref) => {
      const MotionComp = motion.create(getComp(asChild, Component))
  //                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^ (Types error)
  
      return (
          <MotionComp ref={ref} className={className} {...props} />
      )
  })
  MotionSlot.displayName = "MotionSlot"
  
  const getComp = (asChild?: boolean, as: keyof React.ReactHTML | React.ComponentType<any> = "div") => {
      return asChild ? ReactSlot : as
  }
  
  export { MotionSlot }

  Error:

  Argument of type 'ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>> | keyof ReactHTML | ComponentType<...>' is not assignable to parameter of type 'string | ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>'.
    Type 'ComponentClass<any, any>' is not assignable to type 'string | ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>'.
      Property '$$typeof' is missing in type 'ComponentClass<any, any>' but required in type 'ForwardRefExoticComponent<SlotProps & RefAttributes<HTMLElement>>'.ts(2345)
  index.d.ts(636, 18): '$$typeof' is declared here.

5. Expected behavior

No types error like in v11.3.31.

6. Video or screenshots

NaN

7. Environment details

If applicable, let us know which OS, browser, browser version etc you're using.

Software	Name(s)	Version
Framer Motion	framer-motion	12.0.0-alpha.1
NextJs	next	15.0.0-canary.144
React	react	19.0.0-rc-a03254bc-20240905
Typescript	typescript	5.5.4
Node	n/a	20.11.1
Package Manager	pnpm	9.9.0
Operating System	Windows 11	Insider Preview 10.0.26120.751

[Fyz1408]

I'm getting the exact same error would love to see a fix

[rafaelklaessen]

Would be great if this could be looked at!

[ygorluiz]

As a temporary solution until the issue is resolved, we can employ the Slot component provided by Radix UI

[binaryartifex]

yep, this has just brought everything to a standstill. trying to pass any react-aria components to motion wrapper...

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

const MotionModalOverlay = motion(ModalOverlay);
const MotionModal = motion(Modal);

if i hover over the ModalOverlay error i get

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>>'.ts(2345)
index.d.ts(636, 18): '$$typeof' is declared here.

• "framer-motion": "^11.8.0"
• "react-aria-components": "1.3.3"
• "react": "18.3.1"
• "@types/react": "18.3.9"

[emyann]

This is ugly but this is how I deal with it for the moment 😬

const AriaModalOverlay = motion.create(ModalOverlay as (typeof ModalOverlay) & {$$typeof: symbol});
const AriaModalMotion = motion.create(AriaModal as (typeof AriaModal) & {$$typeof: symbol});

[DevinDon]

Any update?

[romaaan-ur]

It is very interesting bug, but @emyann provide solution, we need use this construction

const MotionComponent = motion.create(CustomComponent as ComponentProps, { forwardMotionProps: true });

By default, all motion props (like animate etc) are filtered out of the props forwarded to the provided component. By providing a forwardMotionProps config, the provided component will receive these props.