Async/await is not working with this pattern

[rf00]

This one works:

//boot.js
var main = require('./main.js')

main.boot()

//main.js

export async function boot() {
  await new Promise(function(resolve, reject) {
    console.log('hello world');
    setTimeout(function() {
      resolve();
    }, 1000);
  })
  console.log('hello world after 1s!');
}

This one works with webpack but systemjs:

//boot.js
var main = require('./main.js')

//main.js

(async function boot() {
  await new Promise(function(resolve, reject) {
    console.log('hello world');
    setTimeout(function() {
      resolve();
    }, 1000);
  })
  console.log('hello world after 1s!');
})()

Not sure is it an issue

Edit: Works after adding this: export var p = 5; More precisely, in configuration:

meta: {
  './js/main.js': {
    format: 'esm'
  }
}

[OrKoN]

@rf00 AFAIK, systemjs classifies a module as an ES6 module only if there are import/export statements. Otherwise it assumes it is ES5 and does not apply the transpiler.

[rf00]

@OrKoN It works!

[aluanhaddad]

@rf00 AFAIK, systemjs classifies a module as an ES6 module only if there are import/export statements. Otherwise it assumes it is ES5 and does not apply the transpiler.

Sort of. Basically, if there is no out-of-band¹ metadata specifying the format of a package, files are parsed and a format is inferred based on a number of factors including the presence of import/export statements.

It is often desirable to specify the source module format declaratively as this may improve performance and does not depend on heuristics²

¹ Out of band in this context would be package configuration such as

SystemJS.config({
  transpiler: "plugin-babel",
  packages: {
    "app" : {
      // The format of modules within this package will not be inferred by parsing
      // and rather will be assumed to match the specified value
      "format": "esm",
      "meta": {
        "*.js" : {
          "loader": "plugin-babel"
        }
      }
    },
    // the following are just examples for expository purposes
    "jquery": {
      "format": "amd"
    },
    "moment": {
      "format": "cjs"
    },
    "rxjs": {
      "format": "esm",
      // I am a masochist who wants to build RxJS from source
      "map": {
        ".": "./src"
      },
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "plugin-typescript"
        }
      }
    }
  }
});

It may also come in the form of overrides in the jspm registry

{
  "format": "amd"
}

or overrides explicitly provided when installing with jspm on a case by case basis

$ jspm install jquery --override "{format : 'cjs'}"

² See the SystemJS documentation for module-format-detection.