0
votes

I have the following requirejs config in my Magento2 project:

var config = {
  map: {
    '*': {
      productView: 'Mediahuis_Base/js/product-view',
      refreshCartScript: 'Mediahuis_Base/js/checkout/refresh-cart',
      addressCompletion: 'Mediahuis_Base/js/address/completion',
      addressCompletionHelper: 'Mediahuis_Base/js/address/completion-helper',
      prepareCheckoutShipping: 'Mediahuis_Base/js/checkout/shipping-prepare',
      jquery: 'js/jquery-private',
      /*'jquery/jquery.mobile.custom': 'jquery/jquery.mobile.custom',
       'jquery/jquery-migrate': 'jquery/jquery-migrate',
       'jquery/jquery-storageapi': 'jquery/jquery-storageapi',
       'jquery/ui': 'jquery/ui',
       'jquery/jquery.cookie': 'jquery/jquery.cookie',
       'jquery/validate': 'jquery/validate',
       'jquery/jquery-ui-timepicker-addon': 'jquery/jquery-ui-timepicker-addon',
       'jquery/jquery.metadata': 'jquery/jquery.metadata'/**/
    },
    'js/jquery-private': {
      jquery: 'jquery'
    }
  }
};

js/jquery-private.js

define([
  "jquery"
  ], function (jq) {
  return jq.noConflict();
});

The paths I commented out in the example should dynamically be resolved since this list will change all the time (vendor files).

When I don't add these manually, I get the following error: Uncaught Error: Script error for: js/jquery-private/jquery-ui-timepicker-addon

In this case, the real file is located in js/jquery/jquery-ui-timepicker-addon. As you can see, jquery/ is also being resolved in jquery-private/.

The reason for this workaround is the need for the required jquery module to be inserted as a noConflict version. Without it, I get the following error: Uncaught TypeError: $.widget is not a function. Since I'm requiring vendor js files, I'm not able to change the source there...

1

1 Answers

0
votes

I haven't really found a perfect solution to my problem yet, but I solved it this way:

var config = {
  map: {
    '*': {
      ...
    },
    'js/jquery-private': {
      jquery: 'jquery'
    }
  }
};

(function (global) {
  require.baseLoad = require.load;
  require.load = function (context, moduleName, url) {
    if (url.indexOf('/jquery.js') !== -1) {
      url = url.replace('/jquery.js', '/js/jquery-private.js');
    }
    require.baseLoad(context, moduleName, url);
  };
}(this));