How Can I Make A Call To An Api That Was Loaded Globally While I Am Inside Requirejs?

I inherited a project that is using magento and foundation. I incorporated requirejs and backbone on top of this and I am trying to get a foundation orbit gallery working that is b

Solution 1:

Here's a recreation of your problem using jquery.cookie, it's a small plugin that modifies the jQuery object also.

In this example, there is a Global jQuery added via <script>, this is version 2.2.4, and within the RequireJS configuration, there is another, which is 3.2.1. This way we can compare.

Run the code and see what happens.

var globaljQuery = jQuery;

require.config({
    paths: {
        "jquery-cookie": "//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min",
        "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min"
    }
});

require(['jquery-cookie'], function() {
  console.log("Old Global jQuery Version: " + globaljQuery().jquery);
  console.log("Old Global Cookie add-on exists: " + Boolean(globaljQuery.cookie));	
  console.log("New Global jQuery Version: " + jQuery().jquery);
  console.log("New Global Cookie add-on exists: " + Boolean(jQuery.cookie));	
});

<!-- Global jQuery --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>

The plugin in this case, understands it is in an AMD environment and uses RequireJS to access jQuery. Now 2 jQuery objects have been created, and unfortunately only 1 modified to include the plugin.

In your case, you cannot remove the globals right now, but your solution should be to use the globals within the RequireJS context.

This can be done in 2 ways:

A) Create a module with this code:

define(function() { return jQuery; });

and then use your path config to point jquery there.

B) Slightly cleaner is to use the callback configuration option:

require.config({
  callback: function() {
    define('jquery', function() { return jQuery; });
  },
  ...   

See it in action:

var globaljQuery = jQuery;

require.config({
    callback: function() {
        define('jquery', function() { return jQuery; });
    },
    paths: {
        "jquery-cookie": "//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min",
        "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min"
    }
});

require(['jquery-cookie', 'jquery'], function(cookiePlugin, requiredjQuery) {
  console.log("Old and New Global jQuery equal?: " + (globaljQuery === jQuery));
  console.log("Global and Required jQuery equal?: " + (jQuery === requiredjQuery));
});

<!-- Global jQuery --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>