motiondivision / motiondivision/motion

[BUG] Inactionable warning when using LazyMotion + Reorder

Open
#2,094 2 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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:

  1. Make a Next.js app with <LazyMotion strict features={() => import('framer-motion').then(mod => mod.domMax)}> wrapping the whole app
  2. On one page, using the Reorder.Group + Reorder.Item components
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.