JS Module Resolution - Interactive Lab | IconVault
Step through CJS vs ESM resolution against a live project tree: node_modules traversal, main vs exports, extensions.
JS Module Resolution
CJS vs ESM resolution with a live tree visualizer
Legend: highlighted tree nodes are the paths being probed right now.
CJS probes extensions (.js, .json, .node), reads package.json main, and falls back to index.js for directories.
ESM needs the exact filename including extension, and package.json exports maps win over main. Bare imports walk node_modules upward from the importing file.
5 of 5 free resolutions left. Runs fully in your browser.
About this tool
IconVault's JS Module Resolution lab visualizes the algorithm that turns an import specifier into a file. Type any specifier and importing file, pick CommonJS or ESM, then step through the resolution one lookup at a time while the fake project tree highlights every path being probed. Watch bare specifiers walk node_modules upward, relative imports probe extensions, and package.json exports maps win over main. It is free and runs fully in your browser, with a copyable step-by-step trace.
Preset scenarios cover the classic gotchas: ./lib resolving in CJS but failing in ESM without an extension, lodash/fp subpath resolution, @scope/pkg exports maps, and nested node_modules winning for deep dependencies but losing from the project root. Comparing the two modes side by side is the fastest way to understand why ERR_MODULE_NOT_FOUND happens and how to fix it.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon