# Es Modules

> Use when reviewing scripts, client components, bundles, or runtime behavior related to Use ES modules (import/export). Inspect both source code and the browser execution path so fixes target the real bottleneck or bug.

- Skill: `thedaviddias/es-modules` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add thedaviddias/es-modules`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thedaviddias/es-modules/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: thedaviddias (https://skillmd.com/u/thedaviddias)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/thedaviddias/es-modules

---


# Use ES modules (import/export)

ES modules are statically analyzable — bundlers can determine at build time what code is actually used and eliminate the rest (tree-shaking). CommonJS require() is dynamic and prevents this optimization. ES modules are also the browser-native standard, reducing the need for build-time transformation.

## Quick Reference

- Use import/export syntax instead of require()/module.exports
- Named exports improve IDE autocompletion and enable tree-shaking
- Add type="module" to script tags or use a bundler to load ES modules in browsers
- Default exports are fine but named exports scale better in large codebases

## Check

Identify any use of require(), module.exports, or exports in this JavaScript file that should be converted to ES module syntax.

## Fix

Convert all require() and module.exports statements to ES module import/export syntax.

## Explain

Explain the benefits of ES modules over CommonJS, including tree-shaking, static analysis, and browser support.

## Code Review

Review scripts, client components, and browser execution paths related to Use ES modules (import/export). Flag exact imports, event handlers, runtime side effects, or blocking operations that violate the rule, and state how the change should be verified in the browser.

---

For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.

Rule page: https://frontendchecklist.io/en/rules/javascript/es-modules