motiondivision / motiondivision/motion
[BUG] Inactionable warning when using LazyMotion + Reorder
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 33.7k
- Forks
- 1.4k
- Avg merge
- 1d 10h
- Merged PRs (30d)
- 14
Description
1. Read the FAQs 👇
2. Describe the bug
I'm using LazyMotion with strict enabled on my whole app, but Reorder on a single page. This is printing a warning for the Reorder Group and the Reorder Item
I've read through the PR that implemented the warning, and a warning is certainly better than an error :) but I would still like a way to suppress/intentionally ignore this warning for this part of the component tree. I've read and acknowledged the warning, but there's nothing I can do about it.
3. Steps to reproduce
Steps to reproduce the behavior:
- Make a Next.js app with
<LazyMotion strict features={() => import('framer-motion').then(mod => mod.domMax)}>wrapping the whole app - On one page, using the
Reorder.Group+Reorder.Itemcomponents - See the warning logged to the console
4. Expected behavior
It seems to me like the Reorder components should use m under the hood and functionality should just break if the user hasn't set up LazyMotion correctly, or there should be some kind of noWarn prop that can be set. It feels like we're in a weird middleground with the current warning that you can't do anything about.
5. Video or screenshots*
You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.
at MotionComponent (webpack-internal:///../../node_modules/framer-motion/dist/es/motion/index.mjs:51:65)
at ReorderGroup (webpack-internal:///../../node_modules/framer-motion/dist/es/components/Reorder/Group.mjs:20:25)
...
You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.
at MotionComponent (webpack-internal:///../../node_modules/framer-motion/dist/es/motion/index.mjs:51:65)
at ReorderItem (webpack-internal:///../../node_modules/framer-motion/dist/es/components/Reorder/Item.mjs:27:24)
6. Environment details
framer-motion@10.11.2
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the ReorderGroup and ReorderItem entry points named in the warning stack traces, then read the pull request that introduced the warning. Determine whether the intended resolution is to change the components' motion implementation or provide a suppression option; done requires an agreed behavior and tests showing the warning is handled correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- next.js, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100