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.

• Jimmy: Are you trying to use jquery3 for your Magento instance or just your module?
• Black: I try to add it to magento 2 so I can use it only in certain situations. I don't try to replace the global jquery 1
• Jimmy: If it's just for your project, I can say that it's the same as any modules. You can open paypal, see how they load the paypal's lib/sdk from url or just change your syntax to the correct one - Vendor_Module/js/jquery

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.

• Black: I don't want to use jQuery UI?

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)