0

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?

2 Answers 2

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.

2
  • Thanks - I'm closer, and in a much more tidy way then my first attempts. I've got all the hooks working as you recommended, so now the first thing loaded is my version of jQuerry. Problem is I still have strange JavaScript issues. If I do this in my js_alter it seams to all work: $javascript['misc/jquery.js']['data'] = "" ; Not ideal... thing I really have to figure out how to remove it...
    – summerg
    Nov 25, 2014 at 16:11
  • I think that is just a side effect of using a system that provides so much functionality out of the box. The CSS overrides for e.g. system-menus.css is to put stylesheets[all][] = system-menus.css in your theme.info file. I do understand it looks a bit messy, but it's good there is an explicit mechanism to achieve that stuff through the hook system.
    – bloke_zero
    Nov 26, 2014 at 9:29
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.