Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Redundant dependencies with RequireJS

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 internally and by external library Gridstack, which is causing this issue.

Both internal and external references should point to ONE file jquery-ui.js.

How to configure RequireJS (i.e. inside main.js) to handle these references as one without doing any changes to any of the existing modules/libraries?

  • JQuery UI v1.11.2 - My JQuery UI distribution (single file)

  • Gridstack 0.2.5-dev - The library that references it as jquery-ui/core, jquery-ui/widget, jquery-ui/mouse, jquery-ui/draggable and jquery-ui/resizable

  • I use jquery.ui internally

like image 565
Peter G. Avatar asked Jan 07 '23 14:01

Peter G.


1 Answers

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.

like image 142
Gargamel Avatar answered Jan 16 '23 23:01

Gargamel