framer / motion

Open source, production-ready animation and gesture library for React
https://framer.com/motion
MIT License
23.55k stars 792 forks source link

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

Open lezan opened 4 weeks ago

lezan commented 4 weeks 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 weeks 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.