SystemJS — Dynamic ES Module Loader for the Browser

Introduction

SystemJS is a dynamic module loader that implements import maps and ES module semantics in environments that do not natively support them. It was instrumental in enabling module-based JavaScript development in the browser before native ES module support became widespread, and remains relevant for micro-frontend architectures.

What SystemJS Does

• Loads ES modules, AMD, CommonJS, and global scripts dynamically at runtime
• Implements the import maps specification for module resolution
• Supports dynamic import() for code splitting without a build step
• Provides a plugin system for loading CSS, JSON, and other file types as modules
• Works in browsers back to IE11 with the s.js minimal loader variant

Architecture Overview

SystemJS intercepts module load requests, resolves specifiers using import maps, fetches the module source, and evaluates it in a module registry. The System.register format wraps modules for environments without native ESM support. Plugins hook into the resolve, fetch, translate, and instantiate phases, enabling custom loading behavior for any file type.

Self-Hosting & Configuration

• Include system.js or the minimal s.js variant via a script tag
• Define import maps inline or load them from an external JSON file
• Use the extras packages for AMD and named-register support
• Configure the loader via System.config() for base URL and map overrides
• Integrate with single-spa for micro-frontend module federation

Key Features

• Import maps support for bare module specifier resolution
• Dynamic import() without requiring a bundler or build step
• Multiple module format support (ESM, AMD, CommonJS, globals)
• Plugin architecture for loading non-JavaScript assets
• Minimal s.js variant under 2 KB for production use

Comparison with Similar Tools

• Native ES Modules — Browsers now support import/export natively with import maps; SystemJS provides a polyfill for older browsers
• webpack Module Federation — Build-time module sharing between applications; more complex but integrated with the webpack ecosystem
• RequireJS — AMD module loader that preceded SystemJS; limited to the AMD format
• import-maps polyfill (es-module-shims) — Lighter polyfill focused solely on import maps without SystemJS's multi-format support

FAQ

Q: Is SystemJS still needed with native ES modules? A: For modern browsers with import map support, native ESM is sufficient. SystemJS remains useful for legacy browser support and micro-frontend architectures using single-spa.

Q: What is System.register format? A: System.register is a module format that wraps ES modules for environments without native ESM. Build tools like Rollup and webpack can output this format for SystemJS consumption.

Q: How does SystemJS relate to single-spa? A: single-spa, the micro-frontend framework, uses SystemJS as its recommended module loader for dynamically loading independently deployed micro-applications at runtime.

Q: Can I use SystemJS with TypeScript? A: Yes. Configure your TypeScript compiler to output System.register format (module: "system" in tsconfig), and SystemJS will load the compiled output.

Sources

• https://github.com/systemjs/systemjs
• https://github.com/systemjs/systemjs/blob/main/docs/README.md