Magento 2 - How to use jQuery3?

Question

I try to include jQuery 3 to my project so I can use it on some CMS sites.

Attempt:

THEME = app\design\frontend\company\fresh\

THEME\web\js\jQuery\jquery-3.6.0.js

Copy pasted the code from here to the file:

/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */
!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.e ...

THEME\requirejs-config.js

var config = {
    map: {
        '*': {
            jquery3: 'js/jQuery/jquery-3.6.0',
        }
    }
};

CMS Site:

Now I inserted this to my CMS Site...

<script>
require([
    'jquery3'
], function ($) {
    $("body").css("color", "black");
});
</script>

...but I get Uncaught TypeError: $ is not a function

What am I doing wrong?

I flushed the cache of course.

Answer 1

Magento out of the box does not contain jQuery UI styles. Also, it is not recommended to download them as is, because it can break the default Magento design. To use certain jQuery UI styles, you need to add them manually in your custom stylesheets in the {your_theme_dir}/web/css or {your_module_dir}/view/{area}/web/css directory.

Answer 2

This may help you

Please replace your $ sign everywhere with jQuery it may be conflicting.

    <script>
    require([
        'jquery3'
    ], function ($) {
    alert("hello");//try alert then actual code (uncomment the below line).. 
    //jQuery("body").css("color", "black");
    });
    </script>

Or this code

    require(['jquery', 'jquery/ui'], function($){
      $(document).ready( function() {
        alert("Hello World");
      });
    });

This can also work

require(['jquery', 'jquery/ui'], function($){
  jQuery(document).ready( function() {
    alert("Inbuilt Jquery is working fine");
  });
});

Answer 3

To add your custom Js Externally Globally, please follow these steps (you need to download the jquery file also )
Step 1: Place requirejs-config.js in the view/frontend folder of your module. Requirejs-config.js looks like:

     var config = {
    map: {
        '*': {
            mycustomjs_jquery3: 'Vendor_Module/js/mycustomjs_jquery3',
        }
    }};

Step 2: Add this code in your phtml file

      require(['jquery', 'mycustomjs_jquery3'], function($,mycustomjs_jquery3){
          $(function(){
             // Custom code here
             alert("hello world good");
        });
     });

Answer 4

I figured it out. First I made a test to see if my jQuery 3 is even getting loaded. So I executed this script in the browser console:

require([
    'jquery',
], function ($) {
    alert("A: " + jQuery().jquery);
    jQuery("body").css("background", "red");

    setTimeout(function() {
        alert("B: " + $.jquery);
        $("body").css("background", "blue");
    }, 1000);
});

Output:

A: 1.12.4      (BG changed to red)
B: undefined   (BG changed to blue)

require([
    'jquery3',
], function ($) {
    alert("C: " + jQuery().jquery);
    jQuery("body").css("background", "green");

    setTimeout(function() {
        alert("D: " + $.jquery);
        $("body").css("background", "yellow");
    }, 1000);
});

Output:

C: 3.6.0 (BG changed to green)
D: Uncaught TypeError: Cannot read property 'jquery' of undefined (fail: BG still stays green)

---

Solution:

Omit the $ in the function

require([
    'jquery3',
], function () {

    alert("C: " + jQuery().jquery);
    jQuery("body").css("background", "green");

    setTimeout(function() {
        alert("D: " + $.jquery);
        $("body").css("background", "yellow");
    }, 1000);
});

Output:

C: 3.6.0 (BG changed to green)
D: undefined (BG changed to yellow green)

Alternative solution:

Fix it by assigning $ = jQuery;

require([
    'jquery3',
], function ($) {

    $ = jQuery;

    alert("C: " + jQuery().jquery);
    jQuery("body").css("background", "green");

    setTimeout(function() {
        alert("D: " + $.jquery);
        $("body").css("background", "yellow");
    }, 1000);
});

Output:

C: 3.6.0 (BG changed to green)
D: undefined (BG changed to yellow green)