SystemJS Babel Extension

0.3.2 verified Sat Apr 25 auth: no javascript

SystemJS Babel Extension (systemjs-babel) version 0.3.2 provides transpilation of TypeScript (.ts) and ES modules (.js) in the browser via SystemJS. It leverages SystemJS's fetch hook to transpile source on-the-fly, skipping already registered System modules. This extension is intended for development workflows only and does not perform type checking or configuration hooks. It supports current syntax polyfills but not missing features. Last release 0.3.2 fixes a regex issue. Releases are infrequent; the package is stable but receives minimal updates.

Common errors

error Uncaught (in promise) Error: Unable to load file with .ts extension ↓

cause Missing file extension in import statement or missing systemjs-babel script.

fix

Ensure systemjs-babel is loaded before System.import, and include .ts extension: 'import './mod.ts'

error Module does not define a constructor ↓

cause Using old bundler pattern; systemjs-babel expects ES module or TypeScript syntax.

fix

Use 'export default' or 'export function' instead of assigning to module.exports.

error TypeError: System.import is not a function ↓

cause System is not defined; SystemJS script not loaded or loaded out of order.

fix

Include <script src="systemjs/dist/s.js"></script> before systemjs-babel.

Warnings

deprecated package.json "main" is not pointing to correct path for CommonJS, may cause require() issues in Node.js ↓

fix Use browser environment only; for Node.js consider alternative build tools.

gotcha All .ts imports must include the file extension (e.g., './mod.ts'). This is unlike typical TypeScript bundlers. ↓

fix Always include .ts extension for relative imports in TypeScript files.

gotcha Babel does not perform type checking; TypeScript type errors will not be caught during transpilation. ↓

fix Use a separate type-checking step with tsc --noEmit.

gotcha Polyfills for modern features (e.g., async/await) are not provided; only syntax transpilation is done. ↓

fix Use core-js or polyfill.io for runtime polyfills.

gotcha Bare specifiers (e.g., import 'lodash') require an import map to be configured. ↓

fix Add an import map via <script type="systemjs-importmap">.

Install

npm install systemjs-babel

yarn add systemjs-babel

pnpm add systemjs-babel

Imports

systemjs-babel
wrong
```
const SystemJSBabel = require('systemjs-babel');
```
correct
```
import 'systemjs-babel';
```
This package is a side-effect plugin; import it before using SystemJS.import() with .ts or .js files.

Quickstart

Shows browser usage: include SystemJS and systemjs-babel scripts, then import .ts and .js files with SystemJS.

<!-- Install: npm install systemjs-babel -->
<script src="https://unpkg.com/systemjs/dist/s.js"></script>
<script src="https://unpkg.com/systemjs-babel/dist/systemjs-babel.js"></script>
<script>
  // Load a TypeScript module
  System.import('./app.ts')
    .then(m => console.log(m))
    .catch(e => console.error(e));

  // Load an ES module
  System.import('./module.js')
    .then(m => m.default());
</script>