react-doctor/use-lazy-motion
Use `import { LazyMotion, m } from "framer-motion"` with `domAnimation` features — saves ~30kb
- Category: Bundle Size
- Severity: warn
- Source:
oxlint-plugin-react-doctor - Framework: global
- Enabled when: always
Validation prompt
Use this to decide whether a fired diagnostic is real or a false positive.
Confirm an ImportDeclaration from "framer-motion" or "motion/react" that includes a named motion specifier. The rule fires even when you animate a single element because importing motion pulls the full animation graph (~34kb gzipped). False positive: a tiny one-off root animation where the <LazyMotion> provider overhead negates the saving.
Fix prompt
Use this once validation confirms the diagnostic is real.
Switch to import { LazyMotion, m, domAnimation } from "framer-motion", wrap the tree once in <LazyMotion features={domAnimation}>, and replace <motion.div> usages with <m.div>. Use domMax instead of domAnimation if you need drag, pan, or layout-projection features. See https://motion.dev/docs/react-reduce-bundle-size