Transpiling Angular2 ES6 to ES5 using Babel (and module “transform-es2015-modules-systemjs”) and SystemJS

Question

I am getting the following error when trying to use the babel module "transform-es2015-modules-systemjs".

This error occurs in the gulp build when executing the function specified below compileJs() to transpile ES6 to ES5.

Error:

System.register(['gulp', 'gulp-util', 'run-sequence', 'require-dir', 'del'], function (_export, _context) {

ReferenceError: System is not defined

This package.json fails with gulp:

"babel": {
"presets": [
  "es2015"
],
"plugins": [
  "angular2-annotations",
  "transform-decorators-legacy",
  "transform-class-properties",
  "transform-flow-strip-types",
  "transform-es2015-modules-systemjs"
]
},

This works with gulp however I want the code to be transpiled to a format that SystemJs recognizes for module loading (I am trying to avoid using webpack and browsify) and the default transpiles to CommonJS which the browsers don't recognise yet:

"babel": {
"presets": [
  "es2015"
],
"plugins": [
  "angular2-annotations",
  "transform-decorators-legacy",
  "transform-class-properties",
  "transform-flow-strip-types"
]
},

Function in gulp to transpile:

function compileJs() {
  let enableJsSourceMaps = argv['enable-js-source-maps'] || process.env['GULP_ENABLE_JS_SOURCE_MAPS'] !== undefined;

  return gulp.src([
    'src/main/webapp/modules/**/*.js'
  ])
    .pipe(gulpIf(enableJsSourceMaps, sourcemaps.init()))
    .pipe(babel())
    .pipe(gulpIf(enableJsSourceMaps, sourcemaps.write('.')))
    .pipe(gulp.dest('target/gulp/main/modules'));
}

index.html that uses SystemJS:

<script>
        System.config({
            transpiler: "babel",
            babelOptions: {
                "optional": [
                    "runtime"
                ]
            },
            packages: {
                'modules': {
                    format: 'register',
                    defaultExtension: 'js'
                },
                'vendor': {
                    defaultExtension: 'js'
                }
            }
        });
        System.import('modules/config/bootstrap');
    </script>

Can anyone shed any light into why this does not work, what I might be missing?

"System is not defined" means that you need to polyfill System. github.com/systemjs/systemjs — Shuhei Kagawa
I'm not an expert of system.js but it seems that you can copy and load node_modules/systemjs/dist/system.js or system-csp-production.js with <script> tag. — Shuhei Kagawa
Thanks for you suggestions, the issue is not in the index.html, I put that there to show how I am using the the javascript once transpiled. I am using script tags to include the required SystemJS file into the application. The error occurs when running the function in gulp to transpile. — Robert Leggett
Ah, I see! I should have read the error message carefully. Anyway glad it works! — Shuhei Kagawa

Robert Leggett Robert Leggett · Accepted Answer · 2016-05-05T05:29:56

I have managed to solve this issue.

The problem is in the package.json the following below is applied to the whole build including the gulp files that were written in ES6:

"babel": {
"presets": [
  "es2015"
],
"plugins": [
  "angular2-annotations",
  "transform-decorators-legacy",
  "transform-class-properties",
  "transform-flow-strip-types"
]
},

So the solution was to remove the following from package.json:

"plugins": [
      "angular2-annotations",
      "transform-decorators-legacy",
      "transform-class-properties",
      "transform-flow-strip-types"
    ]

And to add it to the compileJs() function in gulp that does the transpiling of only the Angular2 files:

function compileJs() {
  let enableJsSourceMaps = argv['enable-js-source-maps'] || process.env['GULP_ENABLE_JS_SOURCE_MAPS'] !== undefined;

  return gulp.src([
    'src/main/webapp/modules/**/*.js'
  ])
    .pipe(gulpIf(enableJsSourceMaps, sourcemaps.init()))
    .pipe(babel({ plugins: [
      "angular2-annotations",
      "transform-decorators-legacy",
      "transform-class-properties",
      "transform-flow-strip-types",
      "transform-es2015-modules-systemjs" ]} ))
    .pipe(gulpIf(enableJsSourceMaps, sourcemaps.write('.')))
    .pipe(gulp.dest('target/gulp/main/modules'));
}

This then produces transpiled files that can be used with SystemJS.

Hope this helps.

Transpiling Angular2 ES6 to ES5 using Babel (and module “transform-es2015-modules-systemjs”) and SystemJS

1 Answers