ui-calendar icon indicating copy to clipboard operation
ui-calendar copied to clipboard

moment is undefined when using requirejs

Open Ephapox opened this issue 8 years ago • 11 comments

I'm using ui calendar with requirejs and I ran into an issue with loading moment.

require.config({
  paths: {
    "angular": "angular",
    "ui-calendar": "calendar",
    "fullcalendar": "fullcalendar",
    "moment": "moment"
  },
  shim: {
    'angular': {
      exports: 'angular'
    },
    'ui-calendar': {
      'deps': ['angular', 'fullcalendar', 'moment']
    },
    'moment': {
      exports: 'moment'
    },
    'fullcalendar': {
      'deps': ['moment']
    }
  }
});

require(['angular', 'ui-calendar'], function(angular){
    angular.module('app', []).controller('myCtrl', [function(){
      this.eventSources = [// Event Objects]
    }])
})

The calendar renders and has my events loaded on the correct dates but I get a moment is undefined error coming from calendar.js.

It is coming from lines 45-56

var start = moment.isMoment(e.start) ? e.start.unix() : (e.start ? moment(e.start).unix() : '');
var end =   moment.isMoment(e.end)   ? e.end.unix()   : (e.end   ? moment(e.end).unix()   : '');

It seems like there isn't support for loading dependencies with requirejs.

fullcalendar implements support for requirejs with this conditional

if(typeof define === 'function' && define.amd) {
  define(['moment'], factory);
} else {
  factory();
}

function factory(moment) {
  return // ui.calendar module
}

I just wanted to make sure this isn't something that has been brought up before or goes against what the creator wanted before I submit a PR.

Ephapox avatar Apr 15 '16 00:04 Ephapox

Hi! thanks for raising this.

I'd be open to a PR that sorts this out. While I am not a user of requirejs, it seems to be a good and popular solution.

Can I ask you for a back port to the maint-1.0 branch as well?

martin-langhoff avatar Apr 15 '16 03:04 martin-langhoff

Hi , please look at my example with require.js 'ui.calendar' : { deps: ['angular', 'fullcalendar','jquery','moment'] },

I don't have 'fullcalendar': { 'deps': ['moment'] }

and second, please insert ui-calendar in your angular module DI.

R-iskey avatar Jun 01 '16 22:06 R-iskey

Hi, Is there a solution to this problem??...I am currently having this same issue?

amelgoza avatar Sep 18 '16 06:09 amelgoza

+1 I have tried every way to solve this, even using angular-moment, moment on it's own, moment-timezone, but it stubbornly fails. Any help or ideas would be appreciated - this is a show stopper for me.

mikkelking avatar Sep 20 '16 12:09 mikkelking

Please verify that moment.ja is loaded in browser or not.

poojagayake avatar Oct 24 '16 11:10 poojagayake

@poojagayake That was my issue moment.js was not loading. Once I got moment.js loading correctly everything worked fine.

amelgoza avatar Oct 24 '16 14:10 amelgoza

Has anyone found a workaround on that issue ? I'm having the same problem. I'm using angularJS v1.6 with requireJS too. Moment is loaded in browser, but it stills throws an error "moment is undefined"

AlienSKP avatar Apr 25 '17 15:04 AlienSKP

Is there any JS which needs moment.js to be load first and you missed the dependency.

poojagayake avatar Apr 26 '17 04:04 poojagayake

Tanks for your answer. I solved the problem by Loading moment and firing moment().format() right before line 49

AlienSKP avatar Apr 26 '17 12:04 AlienSKP

Moment is loaded in browser,still I am facing same problem. Any workaround?

vaishali-ghayal avatar Jun 01 '17 08:06 vaishali-ghayal

I solved the problem ,but I think this way is not good. 1.if you declared the dependency, you can try this way

'ui.calendar':          ['jquery','fullcalendar', 'angular'],
define([
  'moment',
  'jquery',
  'angular',
  'ui.calendar',
  'fullcalendar'
],
function (moment, $, angular,  uiCalendarConfig) {
  'use strict';
  angular.module('app', []).controller('myCtrl', [function(){
  }])
  1. if you didn't declared the dependency, you can try this way
define([
  'moment',
  'jquery',
  'angular',
  'ui.calendar',
  'fullcalendar'
],
function (moment, $, angular,  uiCalendarConfig) {
  'use strict';
  angular.module('app', []).controller('myCtrl', [function(){
      window.moment = moment;
      ....
  }])
});

liuhuiiris126 avatar Jul 25 '17 10:07 liuhuiiris126