Systemjs: Issue loading jQuery

[nycdotnet]

Hi,

I've been running through the docs and issues this afternoon and have not been able to find a good answer to my problem. Please forgive me if I've just missed something - I will issue a documentation PR for this if I'm just doing something wrong. I do see jQuery used in a few of the examples, but it's just not working for me.

I'm trying to get jQuery loaded as a dependency in a script and access it via $ using SystemJS 0.19.4. I'm using TypeScript 1.6 and ES6-style imports and loading the compiled JS in the browser (not trying to compile in the browser).

I'm able to get $ to come in to my script (all of the properties of it are there), but $ _itself_ is not a function - it's just an object. So standard jQuery stuff like $('#myDif') doesn't work. However, jQuery _is getting imported_ because I can access static functions that are attached to $ such as $.isArray().

What would cause properties of $ to come in, but not have $ be a function?

Here's the code. I've changed my program.js to basically be a failing unit test.

test.html

  <script src="/scripts/systemjs/system.js"></script>
  <script src="../system-config.js"></script>
  <script>
    System.import("program");
  </script>

system-config.js

System.config({
    paths: {
        'jquery': '/scripts/jquery/jquery.min.js'
    },
    meta: {
        '/scripts/jquery/jquery.min.js': {
            format: 'amd',  //note I have tried global and cjs and there is no difference except
                            // the mechanism by which jQuery gets loaded (script tag or xhr)
            exports: '$'
        }
    },
    defaultJSExtensions: true
});

program.ts

import * as $ from 'jquery';

var results = [
   'Can access $.isArray() : ' + !!($.isArray([]) && !$.isArray('test')),
   'Can access $.isFunction() : ' + !!($.isFunction(() => {return null;}) && !$.isFunction('test')),
   'Can access $() : ' + !!$.isFunction($)
];

console.log(results.join('\n'));

Which compiles to:
program.js

System.register(['jquery'], function(exports_1) {
    var $;
    var results;
    return {
        setters:[
            function ($_1) {
                $ = $_1;
            }],
        execute: function() {
            results = [
                'Can access $.isArray() : ' + !!($.isArray([]) && !$.isArray('test')),
                'Can access $.isFunction() : ' + !!($.isFunction(function () { return null; }) && !$.isFunction('test')),
                'Can access $() : ' + !!$.isFunction($)
            ];
            console.log(results.join('\n'));
        }
    }
});

The output on the console in Chrome and IE 11 is:

Can access $.isArray() : true
Can access $.isFunction() : true
Can access $() : false

How do I get Can access $() : to be true ?

Thank you so much.

[nycdotnet]

Hi - I've figured this out. It appears to be an issue with the jQuery TypeScript definition file. The file does not define a default export, however it is required for this to work.

The issue with my import is that I am doing import * as $ from 'jquery'; which means "get all the properties on jQuery and make me a new object that includes them. What is required is import $ from 'jquery'; which imports the default export only - the default export happens to be the $ function and all its properties. This explains my symptom (getting all properties of $, but not $ itself) and I believe system.js is working correctly.

By modifying the jQuery definition file to declare a default export, everything works as expected.

I'm going to submit a PR to Definitely Typed to fix the jQuery definition. When I get a chance I'll think about if the docs for system.js could be improved for this, but I think that everything was actually right.