Typescript module systems on momentJS behaving strangely

This is happening because SystemJS is automatically converting moment to an ES6-style module by wrapping it in a module object, while CommonJS is not.

When CommonJS pulls in moment, we get the actual moment function. This is what we've been doing in JavaScript for a while now, and it should look very familiar. It's as if you wrote:

var moment = function moment() {/*implementation*/}

When SystemJS pulls in moment, it doesn't give you the moment function. It creates an object with the moment function assigned to a property named default. It's as if you wrote:

var moment = {    default: function moment() {/*implementation*/}}

Why does it do that? Because a module should be a map of one or more properties, not a function, according to ES6/TS. In ES6, the convention for massive external libraries that formerly exported themselves is to export themselves under the default property of a module object using export default (read more here; in ES6/TypeScript, you can import functions like this using the compact import moment from "moment" syntax).

You're not doing anything wrong, you just need to pick the format of your imported modules, and stick to your choice. If you want to use both CommonJS and SystemJS, you might look into configuring them to use the same import style. A search for 'systemjs default import' led me to this discussion of your issue, in which they implement the --allowSyntheticDefaultImports setting.

I did the following:

I installed moment definition file as follows:

tsd install moment --save

Then I created main.ts:

///<reference path="typings/moment/moment.d.ts" />import moment = require("moment");moment(new Date());

And I ran:

$ tsc --module system --target es5 main.ts # no error $ tsc --module commonjs --target es5 main.ts # no error 

main.js looks like this:

// https://github.com/ModuleLoader/es6-module-loader/blob/v0.17.0/docs/system-register.md - this is the corresponding doc///<reference path="typings/moment/moment.d.ts" />System.register(["moment"], function(exports_1) {    var moment;    return {        setters:[            function (moment_1) {                // You can place `debugger;` command to debug the issue                // "PLACE XY"                moment = moment_1;            }],        execute: function() {            moment(new Date());        }    }});

My TypeScript version is 1.6.2.

This is what I found out:

Momentjs exports a function (i.e. _moment = utils_hooks__hooks and utils_hooks__hooks is a function, that's quite clear.

If you place a breakpoint at the place I denoted as PLACE XY above, you can see that moment_1 is an object (!) and not a function. Relevant lines: 1, 2

TL;DR: To conclude it, the problem has nothing to do with TypeScript. The issue is that systemjs does not preserve the information that momentjs exports a function. Systemjs simply copy properties of the exported object from a module (a function is an object in JavaScript too). I guess you should file an issue in systemjs repository to find out if they consider it to be a bug (or a feature :)).

I resolved the issue by replacing

import moment from "moment";

import statement with

import * as moment from "moment";

this.