Why Do I Need To Load Jquery Twice

In my html page, I need to put jquery twice. If I take anyone of them out my page , then the page does not get rendered. Kindly note that both the included 'jquery' are pointing to

Solution 1:

A common solution to this problem would be to use jQuery's built-in $.noConflict(true) but I would suggest you to use the following in your bottom <script> tag code to prevent the double loading of jQuery altogether:

requirejs.config({
    paths: {
      jquery: '../vendors/jquery/dist/jquery.min.js'
    }
  });

  if (typeof jQuery === 'function') {
    //jQuery already loaded, just use thatdefine('jquery', function() { return jQuery; });
  }

  require(["jquery"], function($) {
   //This $ should be from the first jquery tag, and no//double load.
  });

source: https://github.com/requirejs/requirejs/issues/535

Getting rid of one include won't work because:

1. You need jQuery to be loaded before Bootstrap (1st <script> tag)
2. The module's you also loaded using RequireJS can't directly use jQuery, that is loaded via a <script src="jQuery.min.js"> tag (bottom tag)

Solution 2:

jQuery registers itself using the global functions "$" and "jQuery", even when used with RequireJS. If you want to turn off this behaviour you have to call noConflict function, you might need to

define('jquery-require', ['jquery'], function (jq) {
  return jq.noConflict(true);
});

require(['jquery-require'], function(jq) {
  console.log(jq);      // workingconsole.log($);       // undefinedconsole.log(jQuery);  // undefined
});