JS Module Resolution - Interactive Lab | IconVault

Step through CJS vs ESM resolution against a live project tree: node_modules traversal, main vs exports, extensions.

All tools

JS Module Resolution

CJS vs ESM resolution with a live tree visualizer

5 of 5 free uses left
Press Start stepping to walk the ESM resolution algorithm one lookup at a time.

Legend: highlighted tree nodes are the paths being probed right now.

project
package.json ⚙
src
app.js
index.js
lib
util.js
index.js
node_modules
lodash
package.json ⚙
lodash.js
fp.js
@scope
pkg
package.json ⚙
dist
main.js
feature.js
dep
package.json ⚙
index.js
node_modules
nested-dep
package.json ⚙
index.js

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

node module resolutionhow require resolves modulescommonjs vs esmnode_modules lookup algorithmjavascript import resolutionesm import specifierpackage.json main vs exportsnode exports fieldbare specifier javascriptrelative import javascriptjavascript module not foundcannot find module nodeesm needs file extensiontypescript module resolutionnode16 nodenext resolutionrequire.resolve explainednode_modules traversalnested node_moduleshow npm resolves dependenciesimport maps vs node resolutionmjs vs cjspackage.json type moduledual package hazardjavascript module systems explainedcommonjs require algorithmesm resolution algorithmnode resolution ordererr_module_not_found fixcannot find module javascriptnode js import errorhow does node find modulesnode_modules how it worksnpm hoisting explainedpackage.json exports examplessubpath imports nodeexports field node jsmain field package.jsonindex.js fallback nodeextension probing esmimport without extension nodenode esm vs commonjs differencesrequire vs import nodejavascript bare importsscoped package resolutionnode resolution algorithm stepshow import maps worknode_modules folder structurenpm nested dependenciesfix module not found nodejavascript module resolution ordernode js path resolutionesm named exports resolutioncjs interop esmnode conditional exports

More tools

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

View all 10+ tools →