Redundant dependencies with RequireJS

Question

My problem is with having redundant RequireJS dependencies that point to the same JS library.

The referenced library is jQuery UI, it\'s referenced both

Answer 1

While Louis' answer pointed me in the right direction, it still took me some time to figure out the complete solution, so I'm posting my working requirejs config here for future reference:

requirejs.config( {

    baseUrl: 'js',
    paths: {
        jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min',

        'jquery.ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min',

        lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min',
        gridstack: 'https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min',
        'gridstack.jqueryui': 'https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.jQueryUI.min',

    },
    map: {
        '*': {
            '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',
        }
    },
} );

require( ['dashhub'] );

Note that I could not seem to get it working with the gridstack.all.js script from cdnjs. This means in your modules you must reference both gridstack and gridstack.jqueryuiin the define command.

Answer 2

Looking at the jquery-ui.js file you are trying to load, I see that it is a combination of a multiple functions that could be in separate files and that it calls define only once. So it registers as a single module. This is important to know because if it had called define for each of jquery-ui/mouse, jquery-ui/draggable, etc. then the solution would be different because then we'd be talking about a single jQuery UI file that contains multiple modules.

Ok, so this being established, what you can do is use a map in your RequireJS configuration. I'm assuming you already have a proper paths configuration that allows loading the jquery-ui.js file as the jquery.ui module. Add this map:

map: {
    '*': {
        'jquery-ui/mouse': 'jquery.ui',
        'jquery-ui/draggable': 'jquery.ui',
        // And so on for all different cases...
    }
}

This says in all modules (*) whenever jquery-ui/mouse is requested, then load jquery.ui instead, and so on for all the other modules that will be listed under *.