babel-plugin-system-import-transformer

4.0.0 verified Sat Apr 25 auth: no javascript

Babel plugin that transforms import() and System.import() calls into a Universal Module Definition (UMD) pattern, supporting AMD, CommonJS, and global fallback. Current stable version is 4.0.0, working with Babel v7. Previous major versions support Babel v6 (v3.x) and v5 (v2.x). It provides a polyfill for dynamic import syntax for environments that lack native support, with options for Webpack's require.ensure and module ID mapping. Released on npm under MIT license, but note that native import() support in modern bundlers may reduce its necessity.

Common errors

error Error: Cannot find module 'babel-plugin-system-import-transformer' ↓

cause Plugin not installed in node_modules.

fix

Run: npm install babel-plugin-system-import-transformer --save-dev

error Error: Requires Babel "7.x.x", but was loaded with "6.x.x" ↓

cause Installing plugin v4.x with Babel v6.

fix

Use plugin v3.x: npm install babel-plugin-system-import-transformer@^3.0.0 --save-dev

error TypeError: Cannot read property 'call' of undefined ↓

cause Plugin misconfiguration in .babelrc, e.g., missing plugin name.

fix

Ensure .babelrc has correct syntax: { "plugins": ["system-import-transformer"] }

Warnings

breaking Version 4.0.0 requires Babel v7; not compatible with Babel v6 or v5. ↓

fix Use v3.x for Babel v6, v2.x for Babel <6.14, v1.x for Babel v5.

gotcha Plugin transforms both import() and System.import() calls, which may conflict with other tools handling dynamic imports. ↓

fix Ensure no other plugin transforms the same syntax, or disable the plugin if using native import support.

gotcha The UMD output uses window global; may not work in Node.js or server-side rendering without proper global definition. ↓

fix Configure modules option to 'common' for Node.js targets, or define global variable.

deprecated System.import() is deprecated in the ECMAScript spec; prefer using import() directly. ↓

fix Replace System.import() with import() in source code; the plugin handles both.

gotcha The optional commonJS.useRequireEnsure option works only with Webpack; other CommonJS environments may fail. ↓

fix Set useRequireEnsure to false (default) for standard CommonJS, or ensure Webpack is used.

Install

npm install babel-plugin-system-import-transformer

yarn add babel-plugin-system-import-transformer

pnpm add babel-plugin-system-import-transformer

Imports

default plugin
```
// In .babelrc: { "plugins": ["system-import-transformer"] }
```
The plugin is used via Babel configuration, not directly imported in source code.

with options

// In .babelrc: { "plugins": [["system-import-transformer", { "modules": "amd" }]] }

Options are passed as an array element after the plugin name.

CommonJS require pattern
```
// Not imported; transforms import() calls automatically
```
No runtime import; the plugin works at build time.

Quickstart

Shows installation, configuration, and transformation of dynamic import to UMD pattern.

// Install
npm install babel-plugin-system-import-transformer

// .babelrc
{
  "plugins": ["system-import-transformer"]
}

// Input source:
import('./utils/serializer').then(module => {
  console.log(module);
});

// Output (simplified) uses UMD pattern with Promise wrapper.