Drupal and Require.js not playing nice - double load of jQuery

Question

I’ve been given a design library from a large cooperate client built utilizing Bootstrap 3 and Require.js. It’s very robust and well-built with the various scripts using Require.js to load jQuery. Problem is, Drupal has already loaded jQuery and the double load is causing some items to fail. If I remove all the Require.js calls, Drupal jQuery stuff works great. If I remove the base Drupal jQuery file, all the stuff using the Require.js stuff works great. Here’ are options I have considered:

1. Stop jQuery from loading with Drupal, use require to load jQuery on every page - I haven’t tried this yet, but it just seems wrong. I think I can remove jQuery with hook_library_alter() in my theme? Wondering if anyone has tried this… My front end and admin screens
   actually use 2 different themes, so I think I'd have to modify both.
2. Stop jQuery from loading with Require.js – I tried this and none of the other libraries that are loaded with require.js can find query if it’s not loaded with Require.js, so I don’t think this option works. This is my first time using require.js so maybe there is some fun fix for this I haven't figured out?
3. Add all libraries to the site with Drupal – This seems like a lot of messy work as I would have to remove all the require.js dependencies in the library, and there is an expectation that we not modify the library/framework so implementing new releases is easy.

Any other recommendations?

Answer 1

I would try option 1. Require JS is pretty demanding in terms of getting all the dependencies right, so unless you want to debug that I'd load the Require JS version.

The place to look is: https://www.drupal.org/node/756722 where all this is explained.

Basically I think you should (for D7) define the Require JS stuff as a library using hook_library like so:

function hook_library() {
      $libraries['vertical-tabs'] = array(
        'title' => 'MY_STUFF',
        'version' => '1.0',
        'js' => array(
          'PATH/require_stuff.js' => array(),
        ),
        'css' => array(
          'PATH/bootstrap_stuff.js' => array(),
        ),
      );
      return $libraries;
    }

And on hook_init add it like so:

drupal_add_library('system', 'vertical-tabs');

And replace the core version of Jquery with hook_js_alter:

function hook_js_alter(&$javascript) { 
  $javascript['misc/jquery.js']['data'] = drupal_get_path('module', 'MY_MODULE') . '/jquery.js'; // Swap out jQuery to use your version.
}

I wouldn't worry too much about sticking with the Drupal version of Jquery as it is very common to use the jquery_update module to replace it anyway.

Answer 2

I recently had a similar issue while redesigning an existing codebase to use requireJS. It had several pages that had inline javascript calling jQuery functions so to keep things functional during the transaction I had to load jquery the old-fashioned way while migrating other parts to requireJS and this caused double loading issues as well. I've added the following under my requireJS config call.

define('jquery', [], function() {
    return jQuery;
});

Since I know jQuery will be loaded by the time require needs it, this should return the existing global jQuery variable.