⚠️ WARNING ⚠️

Below are just a assumption I made upon searching some online blog post and Drupal documentation, I really can’t say for sure it is accurate considering how surface level I am with PHP and Drupal

If you have read the “JavaScript API Overview” under Drupal API documentation you will have already come across this statement about Drupal uses jQuery.noConflict():

Since Drupal uses jQuery.noConflict() and only loads JavaScript files when required, to use jQuery and the $ shortcode for jQuery you must include jQuery and Drupal as dependencies in the library definition in your MODULE.libraries.yml and add a wrapper around your function. So the whole JavaScript file would look something like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

(function ($, Drupal, once) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      once('myCustomBehavior', 'input.myCustomBehavior', context).forEach(function (element) {
        // Apply the myCustomBehaviour effect to the elements only once.
      });
    }
  };
})(jQuery, Drupal, once);

(* js/foobar.js

1
2
3
4
5
6
7
8
9

foobar:
  js:
    js/foobar.js: {}
  dependencies:
    - core/drupal
    - core/jquery
    - core/once

(* module.libraries.yml

Purpose of jQuery.noConflict()

The reason behind the need of this jQuery.noConflict() is that: some other libraries might also being the dollar sign $ jQuery reserved, for example:

1
2
3
4
5
6
7

class $ {
	hello(name)       { consolg.log("Hello"   + name); }
	goodbye(name)     { consolg.log("Goodbye" + name); }
	other_func(attri) { ... do something ...           }
}

(* example_helloAndGoodbye_usingDollarSign.js

Then if you would to include it before the jQuery, it will be overridden by jQuery. Using jQuery.noConflict() will give back the dollar sign $ declaration to whatever comes before the jQuery takes it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
                           // --------------------------------------------------
    $.hello("Simon");      //OUTPUT > Uncaught TypeError: $.hello is not a function
    $.goodbye("Simon");    //OUTPUT > Uncaught TypeError: $.goodbye is not a function
    $(document).ready(...);//OUTPUT > w.fn.init {0: document, length: 1}
                           // --------------------------------------------------
    $.noConflict();        //OUTPUT > ƒ (e,t){return new ce.fn.init(e,t)}
                           // --------------------------------------------------
    $.hello("Simon");      //OUTPUT > Hello Simon
    $.goodbye("Simon");    //OUTPUT > Goodbye Simon
    $(document).ready(...);//OUTPUT > Uncaught TypeError: $ is not a function
                           // --------------------------------------------------
</script>

(* example_index.html

How Drupal jQuery.noConflict()

In the drupal.init.js javascript file in Drupal core (see the below). The noConflict is used, and as a result after it ran, it will give back the $ sign to the declaration before the core/jquery library get’s imported

1
2
3
4
5
6

// Allow other JavaScript libraries to use $.
if (window.jQuery) {
  jQuery.noConflict();
}

(* <root>/web/core/misc/drupal.init.js

Notice that: jQuery library is not always imported, it is imported only imported once if you use it in any theme/module library, and only if the jQuery is imported will the noConflict run, see below screenshots for demo purpose:

  • if no theme/module library using core/jquery: screenshot
  • if theme/module library using core/jquery: screenshot

In order to have jQuery still available via dollar sign $ without polluting the other libraries using it, you can revert the $ alias inside a function, such that the dollar sign $ only equivalent to jQuery inside its scope. Below are couple of slightly different ways of declaring such function:

1
2
3
4
5
6

jQuery.noConflict();
...
function(){
	const $ = jQuery;
	$(document).ready(...); // More code using $ as alias to jQuery
}

1
2
3
4
5
6
7

jQuery.noConflict();
...
(function( $ ) {
  $(function() {
 	 $(document).ready(...); // More code using $ as alias to jQuery
  });
})(jQuery);

In Drupal the syntax are more similar to the second version:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

(function ($, Drupal, once) {

  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      once('myCustomBehavior', 'input.myCustomBehavior', context).forEach(function (element) {
        // Apply the myCustomBehaviour effect to the elements only once.
      });
    }
  };

})(jQuery, Drupal, once);

(* moduleOrTheme_exmaple.js

1
2
3
4
5
6
7
8
9

example-library:
	js:
		src/js/moduleOrTheme_exmaple.js
  	dependencies:
        - core/drupal
        - core/jquery
        - core/once

(* moduleOrTheme_exmaple.library.yml

Vanilla JavaScript Instead of jQuery

Last but not least, there has been lots of advocates recently claiming that since JavaScript API has been going through some really impressive changes recently, the majority of the jQuery feature can be achieved via the native API’s, with native API, we get: better performance, smaller packages size, less need of maintenance (in case the jQuery as the dependency changes its API), hence we should avoid using jQuery if we can.

Here’s a impressive post I found online where you can find the equivalent of almost every single jQuery function achieved via Vanilla JavaScript (and for those jQuery plugin not listed here, I’m 100% sure there will be a library written based on Vanilla JS that will have the equivalent feature):

2025-09-23T162032

(link: https://youmightnotneedjquery.com/#get_height)

Reference