---
title: "Heavy dependency imported into client code (lint/heavy-import)"
description: "lint/heavy-import: Libraries like `moment` (~70 KB gz), whole `lodash`, syntax highlighters, markdown parsers, full `motion` components across many files, or…"
canonical: https://void-design.vercel.app/rules/lint/heavy-import
lastModified: 2026-09-16
---

# Heavy dependency imported into client code

`lint/heavy-import` · severity **warn** · category Lint · detected by `void lint` and `void audit`

## 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

- https://motion.dev/docs/react-reduce-bundle-size
- https://nextjs.org/docs/app/guides/package-bundling

## 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.

- `tw-v3-renamed` Utility whose meaning changed between Tailwind v3 and v4 — [lint/tw-v3-renamed](https://void-design.vercel.app/rules/lint/tw-v3-renamed)
- `tw-important-soup` Many `!important` utilities in one file — [lint/tw-important-soup](https://void-design.vercel.app/rules/lint/tw-important-soup)
- `tw-arbitrary-sprawl` Many arbitrary colors / pixel values bypass the design tokens — [lint/tw-arbitrary-sprawl](https://void-design.vercel.app/rules/lint/tw-arbitrary-sprawl)
- `page-level-use-client` `"use client"` at the top of a page or layout — [lint/page-level-use-client](https://void-design.vercel.app/rules/lint/page-level-use-client)
- `img-raw` Raw `<img>` in a Next.js app — [lint/img-raw](https://void-design.vercel.app/rules/lint/img-raw)
- `img-missing-dimensions` Image without width/height (or fill / aspect-ratio) — [lint/img-missing-dimensions](https://void-design.vercel.app/rules/lint/img-missing-dimensions)
- `image-priority-deprecated` `priority` on `next/image` is deprecated in Next 16 — [lint/image-priority-deprecated](https://void-design.vercel.app/rules/lint/image-priority-deprecated)
- `missing-alt` Image without `alt` — [lint/missing-alt](https://void-design.vercel.app/rules/lint/missing-alt)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/heavy-import`