Two different variants of the same version of jquery loaded externally

Question

NOTE: This is a different issue than two different versions of jQuery (what's mentioned here: Can I use multiple versions of jQuery on the same page?). The difference are these are two copies of jQuery of the same version number but with different included libraries loaded by external sources, meaning normal solutions to two different versions of calling with jquery does not work.

I have two different variants of jquery on the same website, loaded by different sources.

One, when running by one path, when I run console.log(jQuery.fn.jquery);:

3.4.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/parseXML,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-event/ajax,-effects,-effects/Tween,-effects/animatedSelector

The other path returns

3.4.1

However, both are on the system, path mainly affects load order. The problem is made worse that the former slim version seems to be what is defaulted to when it loads, and is loaded external to my app.

So the question is... one lacks ajax, the other does not, and by one path, ajax versions don't work because jquery thinks there's no such function. How do I tell it to check the other jquery file?

Answer 1

Going off of the comments...

You could approach this issue with an Immediately Invoked Functional Expression (IIFE) to scope your logic, or with a noConflict call. Lets say you have something like the following.

<script src="locationOfNormalJQuery"></script> <!-- included by you -->
...html...
<script src="locationOfSlimJQuery"></script> <!-- included by app out of your control -->

<script>
  ...your logic...
</script>

"your logic" would only be able to access the jQuery included from the second include because each jQuery include replaces the global window.jQuery and window.$ references. This can be altered in two possible ways.

noConflict

<script src="locationOfNormalJQuery"></script> <!-- included by you -->
<script>
  window.jQueryWithAjax = jQuery.noConflict();
</script>
...html...
<script src="locationOfSlimJQuery"></script> <!-- included by app out of your control -->

<script>
  jQueryWithAjax.find(<whatever>);
</script>

IIFE approach

<script src="locationOfNormalJQuery"></script> <!-- included by you -->
<script>
  (function($){
    $(<whatever>);
  }(jQuery));
</script>
...html...
<script src="locationOfSlimJQuery"></script> <!-- included by app out of your control -->

The noConflict approach saves off the previous version of the jQuery into a secondary variable that can be used later. The IIFE approach moves the logic before the second script include happens, and passes in the current jQuery to it. At that point, all the logic in the IIFE will use the $ as the version that was passed in, regardless of how it may change on the window later.

Answer 2

Figured out a possible solution:

Since a later-loaded version of jQuery overrided an earlier version of jQuery, I can use a javascript to do constant checking via jQuery.fn.jquery and inspired by @Taplar's solution and this answer to another question: Listening for variable changes in JavaScript

I add a listener to window.jQuery and window.$

On change, I check the results of jQuery.fn.jquery and if it's different than what I want it to be, I reload jquery with the version I want. (If someone posts the code on how to do this before I figure it out, they'll get the checkmark).