I am working on implementing Moment Timezone into a Django application in order to correct for users accessing it from different time zones, and I am running into an error when importing the files through Require.js. moment.js, moment-timezone.js, and moment-timezone-data.js are all loading, but when my script runs and tries to initiate them, moment-timezone.js and moment-timezone-data.js throw Uncaught TypeErrors.
My moment-timezone-data.js file is copy-pasted from the Moment.js timezone data generator and looks like this (albeit with more time zones):
moment.tz.add({
"zones": {
"America/New_York": [
"-4:56:2 - LMT 1883_10_18_12_3_58 -4:56:2",
"-5 US E%sT 1920 -5",
"-5 NYC E%sT 1942 -5",
"-5 US E%sT 1946 -5",
"-5 NYC E%sT 1967 -5",
"-5 US E%sT"
]
},
"rules": {
"US": [
"1918 1919 2 0 8 2 0 1 D",
"1918 1919 9 0 8 2 0 0 S",
"1942 1942 1 9 7 2 0 1 W",
"1945 1945 7 14 7 23 1 1 P",
"1945 1945 8 30 7 2 0 0 S",
"1967 2006 9 0 8 2 0 0 S",
"1967 1973 3 0 8 2 0 1 D",
"1974 1974 0 6 7 2 0 1 D",
"1975 1975 1 23 7 2 0 1 D",
"1976 1986 3 0 8 2 0 1 D",
"1987 2006 3 1 0 2 0 1 D",
"2007 9999 2 8 0 2 0 1 D",
"2007 9999 10 1 0 2 0 0 S"
],
"NYC": [
"1920 1920 2 0 8 2 0 1 D",
"1920 1920 9 0 8 2 0 0 S",
"1921 1966 3 0 8 2 0 1 D",
"1921 1954 8 0 8 2 0 0 S",
"1955 1966 9 0 8 2 0 0 S"
]
},
"links": {}
});
The requireConfig file is set up like so:
require = {
paths: {
"moment": ServerInfo.generateStaticPathFor("js/ext/moment/moment-with-langs"),
"moment-timezone": ServerInfo.generateStaticPathFor("js/ext/moment/moment-timezone"),
"moment-timezone-data": ServerInfo.generateStaticPathFor("js/ext/moment/moment-timezone-data")
},
shim: {
"moment-timezone-data": {
"deps": ["moment-timezone"]
}
}
};
I then try to initiate Moment Timezone like so:
define(["moment", "moment-timezone", "moment-timezone-data"], function(moment) {
var thisMoment = moment().tz('America/New_York').startOf('day');
});
moment-timezone-data.js throws an Uncaught TypeError of "Cannot call method 'add' of undefined" on line 1:
moment.tz.add({ ... });
moment-timezone.js throws an Uncaught TypeError of "Cannot call method 'rule' of undefined" on line 308:
return [zone, zone.rule(mom, lastZone)];
I am working on implementing Moment Timezone into a Django application in order to correct for users accessing it from different time zones, and I am running into an error when importing the files through Require.js. moment.js, moment-timezone.js, and moment-timezone-data.js are all loading, but when my script runs and tries to initiate them, moment-timezone.js and moment-timezone-data.js throw Uncaught TypeErrors.
My moment-timezone-data.js file is copy-pasted from the Moment.js timezone data generator and looks like this (albeit with more time zones):
moment.tz.add({
"zones": {
"America/New_York": [
"-4:56:2 - LMT 1883_10_18_12_3_58 -4:56:2",
"-5 US E%sT 1920 -5",
"-5 NYC E%sT 1942 -5",
"-5 US E%sT 1946 -5",
"-5 NYC E%sT 1967 -5",
"-5 US E%sT"
]
},
"rules": {
"US": [
"1918 1919 2 0 8 2 0 1 D",
"1918 1919 9 0 8 2 0 0 S",
"1942 1942 1 9 7 2 0 1 W",
"1945 1945 7 14 7 23 1 1 P",
"1945 1945 8 30 7 2 0 0 S",
"1967 2006 9 0 8 2 0 0 S",
"1967 1973 3 0 8 2 0 1 D",
"1974 1974 0 6 7 2 0 1 D",
"1975 1975 1 23 7 2 0 1 D",
"1976 1986 3 0 8 2 0 1 D",
"1987 2006 3 1 0 2 0 1 D",
"2007 9999 2 8 0 2 0 1 D",
"2007 9999 10 1 0 2 0 0 S"
],
"NYC": [
"1920 1920 2 0 8 2 0 1 D",
"1920 1920 9 0 8 2 0 0 S",
"1921 1966 3 0 8 2 0 1 D",
"1921 1954 8 0 8 2 0 0 S",
"1955 1966 9 0 8 2 0 0 S"
]
},
"links": {}
});
The requireConfig file is set up like so:
require = {
paths: {
"moment": ServerInfo.generateStaticPathFor("js/ext/moment/moment-with-langs"),
"moment-timezone": ServerInfo.generateStaticPathFor("js/ext/moment/moment-timezone"),
"moment-timezone-data": ServerInfo.generateStaticPathFor("js/ext/moment/moment-timezone-data")
},
shim: {
"moment-timezone-data": {
"deps": ["moment-timezone"]
}
}
};
I then try to initiate Moment Timezone like so:
define(["moment", "moment-timezone", "moment-timezone-data"], function(moment) {
var thisMoment = moment().tz('America/New_York').startOf('day');
});
moment-timezone-data.js throws an Uncaught TypeError of "Cannot call method 'add' of undefined" on line 1:
moment.tz.add({ ... });
moment-timezone.js throws an Uncaught TypeError of "Cannot call method 'rule' of undefined" on line 308:
return [zone, zone.rule(mom, lastZone)];
4 Answers
Reset to default 11Your define() call only needs moment-timezone and moment-timezone-data. Essentially, moment-timezone acts like a drop-in replacement for moment, extending it to provide .tz(). Refer to the example:
define(["moment-timezone", "moment-timezone-data"], function (moment) {
moment().tz("America/Los_Angeles").format();
});
Also, you don't need to shim the timezone data. Instead, just select the "AMD" option when using the timezone data builder.
Does it make any difference if you switch the dependency order? I believe moment-timezone depends on moment-timezone-data, not the other way around. But I'm not sure if it matters here or not.
I was receiving this error when I made a typo in the timezone.
eg. moment().tz("America/Los_Anegles").format();
I was getting this problem when using the minified version of moment-timezone.js under cdnjs. Just changed to the full source downloaded from moment timezone website and worked!
(function($) {
moment.tz.add({
"zones": {
"America/Mexico_City": [
"-6:36:36 - LMT 1922_0_1_0_23_24 -6:36:36",
"-7 - MST 1927_5_10_23 -7",
"-6 - CST 1930_10_15 -6",
"-7 - MST 1931_4_1_23 -7",
"-6 - CST 1931_9 -6",
"-7 - MST 1932_3_1 -7",
"-6 Mexico C%sT 2001_8_30_02 -5",
"-6 - CST 2002_1_20 -6",
"-6 Mexico C%sT"
]
},
"rules": {
"Mexico": [
"1939 1939 1 5 7 0 0 1 D",
"1939 1939 5 25 7 0 0 0 S",
"1940 1940 11 9 7 0 0 1 D",
"1941 1941 3 1 7 0 0 0 S",
"1943 1943 11 16 7 0 0 1 W",
"1944 1944 4 1 7 0 0 0 S",
"1950 1950 1 12 7 0 0 1 D",
"1950 1950 6 30 7 0 0 0 S",
"1996 2000 3 1 0 2 0 1 D",
"1996 2000 9 0 8 2 0 0 S",
"2001 2001 4 1 0 2 0 1 D",
"2001 2001 8 0 8 2 0 0 S",
"2002 9999 3 1 0 2 0 1 D",
"2002 9999 9 0 8 2 0 0 S"
]
},
"links": {}
});
console.log(moment().tz("America/Mexico_City").format());
})(jQuery);