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
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.jqueryui
in the define command.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With