motiondivision / motion

A modern animation library for React and JavaScript
https://motion.dev
MIT License
25.67k stars 843 forks source link

[BUG] LazyMotion and framer-motion-3d error about tree shaking #2790

Open lezan opened 2 months ago

lezan commented 2 months ago

1. Read the FAQs 👇

2. Describe the bug

Using LazyMotion with strict prop throw an error also with motion from framer-motion-3d.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/v4gc78

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Go to codesanbox https://codesandbox.io/p/sandbox/v4gc78
  2. Run the code
  3. See the preview
  4. See error

5. Expected behavior

I am getting this error

You have rendered a motion component within a LazyMotion component. This will break tree shaking. Import and render a m component instead.

if I use framer-motion and framer-motion-3d I cannot use LazyMotion? Because as far I know there is not m component to use from framer-motion-3d. Error is telling the truth or it does not recognize motion come from framer-motion-3d and so I can remove the strict prop and safe ignore the error?

6. Video or screenshots

I think not applicable

7. Environment details

I think not applicable, getting the same error also in codesanbox.

mattgperry commented 2 months ago

There's no m alternative in Framer Motion 3D currently. So yeah currently you cannot use them in conjunction with strict. If you know what you're doing and the Framer Motion 3D components load later than the initial bundle then you can remove strict.

But also, the size of React Three Fiber and Three.js will dwarf Framer Motion anyway. So if you're including those in the initial bundle you won't see much benefit from LazyMotion.