Moment js undefined after r.js building

Question

Did anyone successfully loaded moment.js in a r.js build (with almond) ?

I am using backgrid and backgridMomentCell: everything's works perfectly before I build my main.min.js file. After build time moment is not defined and thus can't be found by backgridMomentCell extension.

I've tried several option (even shim) without success.

If somedoby has a require.config that work can he/she shares it ?

EDIT (sorry for not answering any sooner, launch time kept me away from SO):

In the build file BackGridMomentCell keep throwing "moment is not defined" errors.

My code as requested in the comment

requirejs.config({
    paths: {
        backbone: 'vendor/backbone-1.1.0',
        backbonePageable: 'vendor/backbone-pageable-1.4.1',
        backgrid: 'vendor/backgrid/js/backgrid-0.2.6',
        backgridPaginator: 'vendor/backgrid/js/extensions/paginator/backgrid-paginator',
        backgridMomentCell: 'vendor/backgrid/js/extensions/moment-cell/backgrid-moment-cell',
        bootstrap: 'vendor/bootstrap/js/bootstrap-3.0.1',
        bootstrapDatepicker: 'vendor/bootstrap-datepicker/bootstrap-datepicker-fda46bb',
        codemirror: 'vendor/codemirror/js/codemirror-3.20',
        codemirrorMarkdown: 'vendor/codemirror/mode/markdown/markdown',
        jsDiff: 'vendor/diff-1.0.7',
        fullCalendar: 'vendor/fullcalendar/fullcalendar-1.6.4',
        fullCalendarJqueryUiCustom: 'vendor/fullcalendar/jquery-ui-1.10.3.custom.min',
        jquery: 'vendor/jquery-1.10.2',
        marked: 'vendor/marked-0.2.10',
        select2: 'vendor/select2/select2-3.4.5',
        speakingurl: 'vendor/speakingurl-0.4.0',
        underscore: 'vendor/underscore-1.5.2',
        moment: 'vendor/moment.with.langs'

    },
    shim: {
        backbone: {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        backgrid: {
            deps: ['jquery', 'backbone', 'underscore'],
            exports: 'Backgrid'
        },
        backgridPaginator: {
            deps: ['backgrid']
        },
        backgridMomentCell: {
            deps: ['backgrid','moment']
        },
        bootstrap: {
            deps: ['jquery']
        },
        bootstrapDatepicker: {
            deps: ['jquery']
        },
        codemirror: {
            exports: 'CodeMirror'
        },
        codemirrorMarkdown: {
            deps: ['codemirror'],
            exports: 'codemirrorMarkdown'
        },
        fullCalendar: {
            deps: ['jquery', 'fullCalendarJqueryUiCustom']
        },
        fullCalendarJqueryUiCustom: {
            deps: ['jquery']
        },
        select2: {
            deps: ['jquery']
        },
        underscore: {
            exports: '_'
        }
    }
});

The head of my module

define([
    'jquery',
    'fullCalendar',
    'underscore',
    'backgrid',
    'backgridPaginator',
    'moment',
    'backgridMomentCell',
    'backbone',
    'collections/ItemPaginatedCollection',
    'utils/BackgridCustomUriCell'
], function ($, _fullCalendar, _, Backgrid, _backgridPaginator, moment, MomentCell,Backbone, ItemPaginatedCollection, BackgridCustomUriCell) {


"use strict";


....

EDIT 3 :

Loading moment.js before my compiled main.js works but is not optimal IMHO.

Answer 1

Most likely your problem is that you didn't specify findNestedDependencies true in your build file.

Take a look at this commit (from my book on RquireJS and Backbone.Marionette): https://github.com/davidsulc/structuring-backbone-with-requirejs-and-marionette/commit/85d3d3dd40d0cebd858224c3903a12d6998d668d

Answer 2

I think it's to do with moment's global object being deprecated.

2.4.0 - Deprecate globally exported moment, will be removed in next major

https://github.com/moment/moment

Moment needs to be defined in the specific module now.

Answer 3

The easiest two methods I have found:

1) Wrap backgrid-moment-cell.js in the CommonJS wrapper code specified in the RequireJS API. You can do this dynamically during the build process using the conversion tool mentioned in the API.

2) Require moment-cell inline and set findNestedDependencies to false in your build.js.

The issue is that the moment-cell code passes in this to itself when it is initialized, and looks for either "exports.moment" or "this.moment."

On a related note, including moment in the shim for moment-cell is unnecessary, and technically you should include underscore. From the API:

Only use other "shim" modules as dependencies for shimmed scripts, or AMD libraries that have no dependencies and call define() after they also create a global (like jQuery or lodash). Otherwise, if you use an AMD module as a dependency for a shim config module, after a build, that AMD module may not be evaluated until after the shimmed code in the build executes, and an error will occur. The ultimate fix is to upgrade all the shimmed code to have optional AMD define() calls.

Moment is actually an AMD module.