babel-plugin-system-import-transformer

1.1.5 verified Fri May 01 auth: no javascript maintenance

Babel plugin that transforms System.import() calls (and import() since v3) into a UMD-compatible pattern using Promise. Originally for Babel 5/6, now supports Babel 7 (v4). Key differentiator: it generates a runtime pattern that works across AMD, CommonJS, and global module formats without requiring a module bundler. Stable version 1.1.5 (legacy) with newer major versions for Babel 6 (v2) and Babel 7 (v4). Automatically detects module target (amd/commonjs) and strips unnecessary format detection. Maintenance mode; consider dynamic import with webpack/rollup instead.

Common errors

error Error: Could not find plugin "system-import-transformer". ↓

cause Plugin not installed or misspelled in Babel config.

fix

Run npm install babel-plugin-system-import-transformer --save-dev and ensure config uses "system-import-transformer".

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

cause Plugin version mismatch with Babel version (e.g., using v4 with Babel 6).

fix

Install matching version: v3.x for Babel 6, v4.x for Babel 7.

Warnings

breaking v2.0.0 dropped Babel 5 support; only works with Babel 6+. ↓

fix Upgrade to v2+ if using Babel 6, or pin to v1.x for Babel 5.

breaking v4.0.0 requires Babel 7; incompatible with Babel 6. ↓

fix Use v3.x for Babel 6, or upgrade your Babel to v7.

gotcha The plugin transforms only System.import() and import() (v3+); it does not transform require() or define() calls. ↓

fix Use a different plugin (e.g., babel-plugin-transform-modules-umd) for other module formats.

deprecated System.import() is deprecated in modern browsers and Node.js; consider using dynamic import() instead. ↓

fix Replace System.import() with import() and use a plugin that targets dynamic imports (e.g., @babel/plugin-syntax-dynamic-import).

Install

npm install babel-plugin-system-import

yarn add babel-plugin-system-import

pnpm add babel-plugin-system-import

Imports

default export

wrong

import systemImport from 'babel-plugin-system-import-transformer'

correct

module.exports = require('babel-plugin-system-import-transformer')

Plugin is CommonJS only; use require in babel.config.js

Plugin in .babelrc
wrong
```
{"plugins": ["system-import"]}
```
correct
```
{"plugins": ["system-import-transformer"]}
```
Plugin name in Babel config is 'system-import-transformer', not 'system-import'

Plugin with options

wrong

{"plugins": ["system-import-transformer", {"commonJS": true}]}

correct

{"plugins": [["system-import-transformer", {"commonJS": true}]]}

Options must be in a sub-array: [plugin, options]

Quickstart

Demonstrates transforming System.import() into a UMD-compatible promise pattern using the plugin.

// Install: npm install babel-plugin-system-import-transformer
// In .babelrc or babel.config.js:
{
  "plugins": ["system-import-transformer"]
}
// Input:
System.import('./utils/serializer').then(function(module){
    console.log(module);
});
// Output:
new Promise(function (resolve, reject) {
    var global = window;
    if (typeof global.define === 'function' && global.define.amd) {
        global.require(['utilsSerializer'], resolve, reject);
    } else if (typeof module !== 'undefined' && (module.exports && typeof require !== 'undefined') ||
               typeof module !== 'undefined' && (module.component && (global.require && global.require.loader === 'component'))) {
        resolve(require('./utils/serializer'));
    } else {
        resolve(global['utilsSerializer']);
    }
}).then(function(module){
    console.log(module);
});