Gridstack.js not loading correctly in RequireJS using Underscore.js, jQuery, and jQueryUI

Question

I have a problem getting Gridstack to work in a Backbone application.

A stripped down version of the RequireJS configuration looks like this:

require.config({
    paths: {
        jquery:                       '../assets/packages/jquery/1.12.0/jquery.min',
        underscore:                   'libs/underscore/underscore-min',
        jqueryui:                     '../assets/packages/jqueryui/1.11.4/custom/jquery-ui.min',,
        gridstack:                    '../assets/packages/gridstack/0.2.4/gridstack.min',
    },
    shim: {
        "gridstack": {
            deps: ["jquery", "jqueryui", "underscore"],
        },
    }
});

The problem is that Gridstack attempts to find fetch files for Lodash and the jQueryUI components "core", "mouse", "draggable", "resizable", and "widget". See picture below.

The Backbone view file (again, boiled down) looks like this:

define([
    'jquery',
    'jqueryui',
    'underscore',
    'backbone',
    'gridstack',
], function(
    $,
    jqueryui,
    _,
    Backbone,
    gridstack
    ){

    var MyView = Backbone.View.extend({
        el: $("#page"),
        className: "MyView",

        initialize: function(){
            console.log('gridstack', gridstack);
        },
    });

    return MyView;
});

I'm using Underscore.js (1.8.3) instead of Lodash, but that should be fine per documentation here: https://github.com/troolee/gridstack.js

Is there anyway to force Gridstack to understand that all of its dependencies are already loaded?

EDIT 2016-02-18 12:47:00

jQueryUI is downloaded from https://jqueryui.com/download/ and includes everything except the Tooltip; it was causing problems when used with Bootstrap.

I see that many people get the AMD version of jQueryUI, e.g. through Bower. However, the package works fine for everything else, so I'm inclined to think the problem lies with Gridstack.

Answer 1

For the jquery-ui not found errors I had to use map in my require.config to map all the files to a single file

paths: {
    "jquery": "path/to/jquery-3.2.1.min",
    "jquery-ui": "path/to/jquery-ui.min",
    "gridstack": "path/to/gridstack",
},
map: {
    'c/gridstack.jQueryUI': {
        'jquery-ui/data': 'jquery-ui',
        'jquery-ui/disable-selection': 'jquery-ui',
        'jquery-ui/focusable': 'jquery-ui',
        'jquery-ui/form': 'jquery-ui',
        'jquery-ui/ie': 'jquery-ui',
        'jquery-ui/keycode': 'jquery-ui',
        'jquery-ui/labels': 'jquery-ui',
        'jquery-ui/jquery-1-7': 'jquery-ui',
        'jquery-ui/plugin': 'jquery-ui',
        'jquery-ui/safe-active-element': 'jquery-ui',
        'jquery-ui/safe-blur': 'jquery-ui',
        'jquery-ui/scroll-parent': 'jquery-ui',
        'jquery-ui/tabbable': 'jquery-ui',
        'jquery-ui/unique-id': 'jquery-ui',
        'jquery-ui/version': 'jquery-ui',
        'jquery-ui/widget': 'jquery-ui',
        'jquery-ui/widgets/mouse': 'jquery-ui',
        'jquery-ui/widgets/draggable': 'jquery-ui',
        'jquery-ui/widgets/droppable': 'jquery-ui',
        'jquery-ui/widgets/resizable': 'jquery-ui',
    }
}

Answer 2

While the problem with Gridstack lingers and the author of Gridstack does not intend to fully support RequireJS (https://github.com/troolee/gridstack.js/issues/332), I found an alternative solution called Gridster.