Languages / JavaScript Core
JS Modules
How JavaScript modules load, interoperate, and disagree with each other.
Photo by chansu shin on Unsplash
A quick introduction to modules
JavaScript uses several module systems in the wild — CommonJS, ESM, and legacy AMD/UMD — each shaped by its host. This introduction maps those systems before the deeper chapters in the JS Modules series.
CommonJS modules
CommonJS modules have been a foundational part of JavaScript, especially in Node.js, since before ES modules (ESM) were officially adopted. Designed to enable modular and maintainable code, CommonJS…
ES modules
ESM, or ECMAScript Modules, is the official module system introduced in ECMAScript 6 (ES6), also known as ECMAScript 2015. ESM provides a native, standardized way to organize and structure code in…
AMD and UMD
In the world of JavaScript, modularity is key to writing clean, maintainable, and scalable code. Two popular module formats that have emerged to facilitate this are AMD (Asynchronous Module…
Build-time vs Runtime modules
Let's dive into how module systems behave at build-time vs runtime , and the distinctions between CommonJS (CJS) , ECMAScript Modules (ESM) , and tools like TypeScript and webpack . I’ll go step by…
Module interoperability
This articles gives an overview about how the different modules systems can or cannot be used together.
File extensions for module imports
If you want, I can make a visual map showing all 6 file extensions, what TypeScript sees, and what Node sees , with arrows showing what extension to use in each import. It’s a really handy cheat…
Subpath imports and exports in package.json
Let’s take a look at subpath imports and exports in Node.js , how they interact with TypeScript compiler settings , and what the practical use cases and best practices are.
Modules in Bundlers
The need to specify file extensions in import statements depends on your runtime and compilation environment, and also on whether you are using ES modules (the import syntax) or CommonJS modules…
Module resolution deep-dive
or Non-relatively:
Typical errors that occur when module types mismatch
The following error indicates that you are attempting to use the require() statement to import an ECMAScript Module (ESM) in a context where CommonJS is expected. This error typically occurs when…