Skip to content

Rule · Lint

Heavy dependency imported into client code

lint/heavy-importwarnvoid lintupdated

Why it matters

Libraries like moment (~70 KB gz), whole lodash, syntax highlighters, markdown parsers, full motion components across many files, or three.js/GSAP in a root layout add tens of KB to every page's first-load JS and parse/compile time on mobile.

How to fix it

Use a lighter alternative or keep the work on the server: Intl.DateTimeFormat instead of moment, lodash-es/debounce per-method imports, render Markdown/Shiki in Server Components, LazyMotion + m for motion, and dynamic-import 3D/GSAP in the component that needs it.

Example

tsx
"use client"
import { LazyMotion, domAnimation } from 'motion/react'
import * as m from 'motion/react-m'
<LazyMotion features={domAnimation} strict><m.div animate={{ opacity: 1 }} /></LazyMotion>

References

More lint rules

void lint reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.