RequireJS : Handling jQuery conflicts with shim and non AMD loaded scripts

Question

I have a page that loads most modules with RequireJS but also has some third party plugins which load their own JS code (not using RequireJS). A simple version of my page looks like...

<script type="text/javascript">
    require.config({
        baseUrl: '/lib',
        shim: {
            "bootsShim": {
                deps: ["jquery"]
            },
        }
      });

        (function() {
           var thirdParty = document.createElement('script'); 
           thirdParty.type = 'text/javascript'; 
           thirdParty.async = true;
           thirdParty.src = "www.someserver.com/somecode.js";
           var s = document.getElementsByTagName('script')[0];     
           s.parentNode.insertBefore(thirdParty, s);
      })();
   </script>

This somecode.js third party library (notice how it also loads asynchronously) comes bundled with its own version of jQuery . Since that also registers as a named AMD module, there is a conflict with the jQuery in my baseUrl (which is also called 'jquery'). Since my jQuery and theirs are different versions.

Since I am using shimmed libraries which need a global jQuery I cannot use this suggestion from the docs of a map config.

How to best mitigate this conflict?

Answer 1

Can't you save your version of jquery, load their script synchronously, so that after they're loaded you can rename the saved jquery in $.ready?

<script src="jquery.js?yourversion"></script>
<script>myJquery = $;<.script>
<script src="www.someserver.com/somecode.js"></script>
<script>
$(document).ready(function(){
  $ = myJquery;
});
</script>