How to properly load local AMD modules with jspm/system.js

Question

I am having a really hard time using local AMD modules in an Aurelia project that uses es6, JSPM, and system.js. I am hoping someone out there can help me configure my project to enable me to import/load my AMD modules and use them in my project. The local AMD style modules are in a format similar to the following:

define
(['require',
'lib/alerts/STARTSTOP',
'lib/alerts/STOPPED',
...
],
function( require, STARTSTOP, STOPPED, ... ) {
  return {
    alert: function( data ) {
      var type = data.type;
      var ev   = data.event;
      var cls  = require( 'lib/alerts/' + ev );
      return new cls( data );
    }
  };
});

When I try to import/load this module into an es6 module I am running into the following error: Uncaught TypeError: Unexpected anonymous AMD define.. I get this error when trying to load the module in either of the following ways:

System.import('lib/alerts/AlertFactory').then( (m) => {
  console.log( m );
});

or

import AlertFactory from 'lib/alerts/AlertFactory.js';

I have also made sure to add the following script to my index.html:

<script>
    window.define = System.amdDefine;
    window.require = window.requirejs = System.amdRequire;
</script>

In addition to the above I have also added a meta format property to my config.js file, but that hasn't seemed to help either.

meta: {
    ...
    "lib/alerts/*.js": {
      "format": "amd"
    }
}

Does anyone have any ideas on why I am running into the error I am seeing and how to properly load my modules? I appreciate any help/insight you can offer.

UPDATE

I finally realized that the main issue here is that I'm trying to use existing AMD modules in and Aurelia project, and the default Aurelia gulp build assumes that all code is written in ES6 and not mixed with AMD. That's why I'm having issues. Vanilla jspm/system.js handle a mix of module formats, but Aurelia does not out of the box.

Answer 1

Just put your AMD modules out of src so babel will not be able to transpile it. Here is working solution I use to import jquery modules:

First, I have local_packages folder in project root and I have jquery module local_packages/somelib/js/mymodule.js

Then in config.js

paths: {
  ...
  "local/*": "local_packages/*",
}

map: {
  ...
  "somelib": "local/somelib",
  "somelib1": "/local_packages/somelib1",
}

And finally my import looks like: import 'somelib/js/mymodule';