---
name: thedaviddias/es-modules
source: https://app.decimal.ai/s/thedaviddias-es-modules@1/SKILL.md
source_sha256: d003e5f3a1f7
---

# 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