[BUG] MotionValue does not fit motion/react-m after migrating

[boar-is]

1. Read the FAQs 👇

Read

2. Describe the bug

After migrating from framer-motion to motion, I can't no more pass MotionValue to a component from motion/react-m:

import type { MotionValue } from 'motion/react'
import { div } from 'motion/react-m'

div({
  style: {
    // error here
    x: 5 as unknown as MotionValue<number>,
  },
})

TS2322: Type MotionValue<number> is not assignable to type
string | number | CustomValueType | MotionValue<number> | MotionValue<string> | MotionValue<any> | undefined
Type MotionValue<number> is not assignable to type MotionValue<any> with 'exactOptionalPropertyTypes: true'. Consider adding undefined to the types of the target's properties.
Types have separate declarations of a private property current

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

N/A

4. Steps to reproduce

N/A

5. Expected behavior

No error

6. Video or screenshots

N/A

7. Environment details

"motion": "11.11.17",

[feledori]

just bumped into this exact issue as well

[anonsyn]

same issue here

[abgregs]

+1 just ran into this as well and was a bit confused by it. Using motion version 11.13.1.

[kudziajaroslaw98]

Same issue react: 19.0.0, motion: 11.17.0

[Debbl]

It looks like the rollup build two of the same type.

[ynamite]

Yep, same issue

[mattgperry]

Can you try 12.0.10 and let me know if this fixes your issue?

[ynamite]

Works! @mattgperry

[kudziajaroslaw98]

Can you try 12.0.10 and let me know if this fixes your issue?

I just tried. Updated the package to 12.0.11 the problem persists. I will give in detail what I have used so maybe it will be easier to reproduce.

React: 19.0.0 Motion: 12.0.11 TypeScript: 5.7.3

import {
  useMotionTemplate,
  useMotionValue,
  type MotionValue,
} from 'motion/react';
import * as m from 'motion/react-m';

 const lightBackground = useMotionTemplate`radial-gradient(${
    backgroundGradientWidth ?? 300
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  }px circle at ${mouseX}px ${mouseY}px, rgb(226 226 226 / .3), transparent 60%)` as MotionValue<any>;

  const darkBackground = useMotionTemplate`radial-gradient(${
    backgroundGradientWidth ?? 300
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
  }px circle at ${mouseX}px ${mouseY}px, rgb(10 15 27 / .2), transparent 60%)` as MotionValue<any>;

 <m.div
        className='pointer-events-none absolute inset-0 -z-10 flex opacity-0 transition-all group-hover:opacity-100 dark:hidden'
        style={{
          background: lightBackground,
        }}
      />

      <m.div
        className='pointer-events-none absolute inset-0 -z-10 hidden opacity-0 transition-all group-hover:opacity-100 dark:flex'
        style={{
          background: darkBackground,
        }}
      />

TS error:

Type 'MotionValue<any>' is not assignable to type 'CustomValueType | MotionValue<number> | MotionValue<string> | MotionValue<any> | Background<string | number> | undefined'.
  Type 'import("d:/GITHUB-PROJECTS/FlashCards/flash-cards/node_modules/framer-motion/dist/types.d-CdW9auKD").e<any>' is not assignable to type 'MotionValue<any>'.
    Types have separate declarations of a private property 'current'.ts(2322)