[BUG] TypeScript error when importing framer-motion/three

1. Read the FAQs 👇

2. Describe the bug

TypeScript error when importing framer-motion/three.

Cannot find module ‘framer-motion/three’ or its corresponding type declarations.

Framer motion works as expected with all animations. However, TypeScript is not happy with the import and does not have typechecking or autocomplete.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/r3f-framer-motion-xx9kc?file=/src/App.tsx

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to App.tsx file in Sandbox
2. Go to the framer-motion/three import
3. See the import error

5. Expected behavior

There is no error when importing framer-motion/three in TypeScript and the typechecking/autocomplete works for all framer-motion properties.

6. Video or screenshots

7. Environment details

Version 5.4.5 of framer-motion.

[mattgperry]

FYI next week we’re going to move this to its own framer-Motion-3d package which will fix this

[asyarb]

As a temporary workaround I’ve found that declaring “framer-motion/three” like below seems to work:

// framer-motion-three.d.ts
declare module "framer-motion/three" {
  export * from "framer-motion/types/three-entry"
}