Using moment.js with lang file and require.js

Question

I'm currently trying to use the moment.js library with require.js and I'm still having trouble understanding the correct setup of such a project. Here is what I do in my main.js file:

requirejs.config({
    baseUrl: 'app',

        paths: {
            // ... more parameters (all Backbone related)
            'moment': 'lib/moment',
            'moment_de': 'lib/lang/de',
        },

    shim: {
        'moment' : {
            deps: [],
        },

        'moment_de': {
            deps: ['moment'],
        },

        // ... more parameters (all Backbone related)
    }
});

I'm using a separate module for configuration purposes. The module looks like this:

define(['moment', 'moment_de'], function(moment, de) {

    moment.lang('de');

    var configuration = {}
    // ...    
    return configuration;
});

As you can see, I'm trying to change the global language of the moment object in this file, but I'm running into the following error messages:

Uncaught Error: Module name "../moment" has not been loaded yet for context: _. Use require([])

And later on:

Uncaught TypeError: Cannot call method 'preparse' of undefined 

The first error message is the language module which is being loaded although it should be loaded AFTER the moment module (if I'm doing it right). The second one is from the moment module that is trying to switch to the language module which hasn't been loaded.

Could someone please shine some light on this issue. Thanks in advance.

EDIT: I fixed the problem using the minified language versions (e.g. this one). Apparently the minified versions are using the AMD format, which allow for an easier inclusion in require.js projects).

I still don't quite understand why it is not possible to include the languages using the shim config, though. Maybe someone could try to explain that.

Answer 1

Another solution (2015):

This example aims to demonstrate how to use the moment.js translations with the navigator.language property, usually the preferred language of the user.

Define moment.js and the language files separately in your requirejs config, like this:

require.config({
  config: {
    'moment': {
      noGlobal: true
    }
  },
  paths: {
    ...
    'moment': '../vendor/moment/moment',
    'moment_de': '../vendor/moment/locale/de',
    'moment_pl': '../vendor/moment/locale/pl'
    ...
  },
  ...
});

Create a small module, like lib/moment.js and specify your language configuration (you can find a list of RFC 4646 language tags here):

define(function(require) {
  'use strict';

  var moment = require('moment'), locale;

  switch(navigator.language) {
    case 'de':
    case 'de-at':
    case 'de-de':
    case 'de-li':
    case 'de-lu':
    case 'de-ch':
      locale = 'moment_de';
    break;

    case 'pl':
      locale = 'moment_pl';
    break;

    ...
  }

  if (locale) {
    require([locale]);
  }

  return moment;
});

Please notice: moment.js supports English by default.

---

In your chaplinjs view class (or any other mvc class/plain script etc), use it like this:

define([
  'chaplin'
  'lib/moment'
], function(Chaplin, moment) {
  'use strict';

  var MyView = Chaplin.View.extend({

    ...

    parse: function() {
      ...
      console.log(moment().format('LLL'));
      ...
    }

    ...

  });

  return MyView;
});