SystemJS Babel Plugin

0.0.25 verified Sat Apr 25 auth: no javascript deprecated

A SystemJS plugin for on-the-fly Babel transpilation of ES2015+ JavaScript modules in the browser. Version 0.0.25 is the latest stable release; project appears unmaintained since 2016. Allows customizing Babel presets/polyfills per module. Superseded by native ES module support and modern bundlers; primarily of historical interest.

Common errors

error Error: Unable to find plugin 'plugin-babel' for module '...' ↓

cause Plugin not registered or map missing in SystemJS config.

fix

Ensure SystemJS.config includes map: { 'plugin-babel': 'path/to/plugin-babel.js' }

error Uncaught ReferenceError: babel is not defined ↓

cause SystemJS babel build dependency missing or not loaded.

fix

Add 'systemjs-babel-build' to map and load the browser build file.

error Error: Cannot find module 'babel-core' ↓

cause Babel-core not bundled or not accessible for browser environment.

fix

Use the provided 'systemjs-babel-browser.js' which includes babel-core.

Warnings

deprecated Package no longer maintained; use modern bundlers (Webpack, Rollup) or native ESM. ↓

fix Migrate to bundler-based workflow or skip transpilation if browsers support ES modules.

breaking Babel 7+ not supported; plugin uses Babel 6 API (babel-core). ↓

fix Stick with Babel 6 or find alternative plugin for Babel 7.

gotcha Plugin requires separate 'systemjs-babel-build' for browser compatibility; fails without it. ↓

fix Include 'systemjs-babel-browser.js' distribution in config map.

gotcha Caching can cause stale code when module files change; due to SystemJS plugin caching. ↓

fix Add cache-busting query strings or use development mode.

Install

npm install systemjs-plugin-babel

yarn add systemjs-plugin-babel

pnpm add systemjs-plugin-babel

Imports

plugin-babel

wrong

import 'plugin-babel'; // Not a direct import; configured via SystemJS.

correct

SystemJS.config({ map: { 'plugin-babel': 'path/to/plugin-babel.js' } })

This plugin is not imported as a module but registered with SystemJS.

default

wrong

System.import('./module.js') // Must prepend 'plugin-babel!' to use transpilation.

correct

System.import('plugin-babel!./module.js')

Use the plugin syntax in SystemJS imports: 'plugin-name!module-path'

babelOptions

wrong

Passing options as query params; use meta configuration.

correct

SystemJS.config({ meta: { './*.js': { babelOptions: { presets: ['latest'] } } } })

Options are set per-file via SystemJS meta, not inline.

Quickstart

Setting up SystemJS with the Babel plugin to transpile ES2015+ modules in the browser.

// 1. Include SystemJS and the plugin in HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
<script src="plugin-babel.js"></script>

// 2. Configure SystemJS
SystemJS.config({
  map: {
    'plugin-babel': 'plugin-babel.js',
    'systemjs-babel-build': 'systemjs-babel-browser.js'
  },
  transpiler: 'plugin-babel'
});

// 3. Use the plugin
SystemJS.import('plugin-babel!./app.js')
  .catch(err => console.error(err));