Update systemjs-builder to 0.15.17

[nflorian]

Hi,

We are trying to update systemjs and systemjs-builder to latest versions:

current -> latest
"systemjs": "^0.19.23", -> 0.19.36
"systemjs-builder": "0.15.13", -> 0.15.26

After updating systemjs to version 0.19.36 everything is working properly, but after updating systemjs-builder starting with version 0.15.17 it's not working anymore.

My Build.js file contains next configuration:

...

var gulp = require('gulp');
var Builder = require('systemjs-builder');

gulp.task('moduleScripts', function() {

var builder = new Builder({
      baseURL: '.',
      defaultJSExtensions: true,
      map: {
        'common': 'lib/common/common.js',
        'datePicker': 'lib/datePicker/datePicker.module.min.js'
      },
      meta: {
        'common': {
            build: false
        }
      }
    });

builder.buildStatic('src/main/components/user/user.module','src/main/components/user/user.module.min.js', 
  { minify: false, format: 'cjs', runtime:false, exportDefault: true }
);

)};

...

Below you can see the only two changes I can see on systemjs-builder version 0.15.17 compared to 0.15.13.

systemjs-builder version 0.15.13

...
  function s(r) {
    if (r === e) return r;
    var t = {};
    if ("object" == typeof r || "function" == typeof r)
      if (g) {
        var n;
        for (var o in r)(n = Object.getOwnPropertyDescriptor(r, o)) && h(t, o, n)
      } else {
        var a = r && r.hasOwnProperty;
        for (var o in r)(!a || r.hasOwnProperty(o)) && (t[o] = r[o])
      }
    return t["default"] = r, h(t, "__useDefault", {
      value: !0
    }), t
  }

  function c(r, t) {
    var n = p[r];
    if (n && !n.evaluated && n.declarative) {
      t.push(r);
      for (var o = 0, a = n.normalizedDeps.length; a > o; o++) {
        var u = n.normalizedDeps[o]; - 1 == v.call(t, u) && (p[u] ? c(u, t) : f(u))
      }
      n.evaluated || (n.evaluated = !0, n.module.execute.call(e))
    }
  }

...

(["10"], ["24", "23"], function($__System) {

  $__System.registerDynamic("15", [], true, function($__require, exports, module) {
    "use strict";;
    var define,
        global = this,
        GLOBAL = this;
...

systemjs-builder version 0.15.17

...
function s(r) {
    var t = {};
    if (("object" == typeof r || "function" == typeof r) && r !== e)
      if (m)
        for (var n in r) "default" !== n && c(t, r, n);
      else {
        var o = r && r.hasOwnProperty;
        for (var n in r) "default" === n || o && !r.hasOwnProperty(n) || (t[n] = r[n])
      }
    return t["default"] = r, x(t, "__useDefault", {
      value: !0
    }), t
  }

  function c(e, r, t) {
    try {
      var n;
      (n = Object.getOwnPropertyDescriptor(r, t)) && x(e, t, n)
    } catch (o) {
      return e[t] = r[t], !1
    }
  }
...
(["10"], ["26", "25"], true, function($__System) {
  var require = this.require,
      exports = this.exports,
      module = this.module;
  $__System.registerDynamic("17", [], true, function($__require, exports, module) {
    "use strict";;
    var define,
        global = this,
        GLOBAL = this;
...

I can't figure out if i'm doing something wrong or si something else.

It seems there is a common issue with this version (0.15.17).

Thanks for help

[nflorian]

After some investigations using (systemjs-debugger) I found that in systemjs-builder version 0.15.17 entry module.exports doesn't contain default property as 0.15.13 has

systemjs-builder version 0.15.13

Imports
     - src/main/components/user/user.module.min.js
          - entry
               - module
                    - exports
                         - default
                              - _configBlocks
                              - _invokeQueue
                              - _runBlocks
                              - config
                              - controller
                              - ...

systemjs-builder version 0.15.17

Imports
     - src/main/components/user/user.module.min.js
          - entry
               - module
                    - exports
                         - _configBlocks
                         - _invokeQueue
                         - _runBlocks
                         - config
                         - controller
                         - ...

I know that in version 0.15.17 should be use option exportDefault: true method, but not working.

[guybedford]

So when running the builder, it's providing user.module.min.js as named exports instead of through the default property?

Try running your build with encodeNames: false to see the System.register('...user.module.min.js', ...) declaration for the module in the bundle file. That may help to see why this may be happening.

[nflorian]

@guybedford, Yes, this is the behavior I'm facing.

I'm using { exportDefault : true } property as mention in 0.15.17 release note but apparently did not bring any changes to builded file even if I put exportDefault property or not.

[guybedford]

@nflorian yes this was actually a breaking change in 0.15.17. Try importing import userModule from 'user.module.min.js' rather as the default?

[nflorian]

@guybedford

We are importing our bundle like this:

System.import('user.module.min.js').then(value) => {

     // In 0.15.13 promise value contains default property
     // value.default == { _configBlocks, _invokeQueue, _runBlocks, config, controller ... }

     // In 0.15.17 promise value doesn't contain default property anymore
     // value == { _configBlocks, _invokeQueue, _runBlocks, config, controller ... }
}

In 0.15.17 Release Notes you wrote about using "options.exportDefault" for legacy module formats.

"options.exportDefault option for static builds to indicate only the default export of the ES module should be the module value of the static module output, with automatic setting of this option for legacy module formats (#591)"

What is not very clear:

• Is default property gone starting with 0.15.17 ?
• Is options.exportDefault property ment to fix legacy modules to have default property which we are missing now?

Thanks

[guybedford]

@nflorian the reason for this is that legacy modules would always look like { default: moduleValue } in the loader, but SystemJS provides a helper that just returns the default value from System.import. This is actually a hack that will be removed in the next major, but does ease the upgrade path from legacy module formats being able to know that the System.import module value is exactly what you'd expect from CommonJS, and not a namespace object.