Magento 2 checkout page keeps on loading.In console,$.event.props is undefined in jquery.mobile.custom.js:44:2.How to clear that?

Question

I have uploaded Jquery version 3.3.1 in app/design/frontend/theme/vendor/web/js.I have linked it in default_head_blocks.xml.Its working fine for Homepage. But when I proceed to checkout, the page keeps o loading. When I look into the console, there are many JS errors. I have never edited/overwritten any of the files shown in the error.

I have attached the errors below

I tried adding Jquery Migrate from http://code.jquery.com/mobile/git/jquery.mobile-git.min.js in app/design/frontend/theme/vendor/web/js.But it added these errors.

[Show/hide message details.] Error: Mismatched anonymous define() module: function(d){return c(d,a,b),d.mobile} http://requirejs.org/docs/errors.html#mismatch require.js:166:17 makeError http://localhost/magento/pub/static/frontend/Canon/CrystalClear/en_US/requirejs/require.js:166:17 intakeDefines http://localhost/magento/pub/static/frontend/Canon/CrystalClear/en_US/requirejs/require.js:1221:36 localRequire/< http://localhost/magento/pub/static/frontend/Canon/CrystalClear/en_US/requirejs/require.js:1408:25

Can you please help me. Thanks in advance.

• Himmat Paliwal: Enable developer mode and check exception log and system log to know more about the exact error being caused.. I hope you will get more idea by doing so..
• Vishali Mariappan: There are no exception error but in System.log there are multiple lines of code saying "Add of item with id XXXXXX(Like Magento_Backend::system_design_schedule )was processed"
• Himmat Paliwal: Ok, may I know why do you need jquery 3.3.1, magento already have inbuilt jquery support.. Is there any special req?
• Vishali Mariappan: Yes I needed to add an owl carousel slider.So I used Jquery 3.3.1 to make it work.
• Himmat Paliwal: check my answer to add jquery support..

Answer 1

Owl carousel would be working fine with inbuilt jquery provided by Magento. please use below code to initiate jquery library in your template file:

require(['jquery'], function($){ 
 //your js code here 
 });

Example:

<script type="text/javascript">
 require(['jquery'], function($){
 $(document).ready( function() {
 alert("Page loaded.");
 });
 });
</script>