ReferenceError: jQuery is not defined Magento 2

Question

I created a countdown using JS. For that i need jQuery so I created requireJs file.

var config = {
paths: {
    'countDown': "ABC_CoundDown/js/countDown"
},
shim: {
    'countDown': {
        deps: ['jquery']
    }
}
};

then added jquery in web/js/jquery.js

then in phtml I used

<script type="text/javascript">

require([
    'jquery',
    'countDown',
    'domReady'
    ], function(
    $,
) {
    var date = "2019-02-12";
    var myDate = new Date(date);
    myDate.setDate(myDate.getDate() + 2);
    $("#countdown").countdown(myDate, function (event) {
        $(this).html(
            event.strftime(
                '<div class="timer-wrapper"><div class="time">%D</div><span class="text">days</span></div><div class="timer-wrapper"><div class="time">%H</div><span class="text">hrs</span></div><div class="timer-wrapper"><div class="time">%M</div><span class="text">mins</span></div><div class="timer-wrapper"><div class="time">%S</div><span class="text">sec</span></div>'
            )
        );
    });

});

on frontend I'm getting this error instead of my result

use jQuery instead of $

Shoaib Munir
– Shoaib Munir

2019-02-12 09:58:59 +00:00
Commented Feb 12, 2019 at 9:58 — Shoaib Munir
– Shoaib Munir, Commented Feb 12, 2019 at 9:58

HelgeB · Accepted Answer · 2019-02-12 10:09:48Z

1

You have a typo in the js code. Remove the , after $ in function($,)

edited Feb 12, 2019 at 10:09

answered Feb 12, 2019 at 10:03

HelgeB

4,5512 gold badges12 silver badges27 bronze badges

Add a comment |

Aasim Goriya · Accepted Answer · 2019-02-12 12:13:28Z

1

I think you have typo issue in your code so Please replace your code with this and let me know if any issue.

 require(['jquery','countDown','domReady'], function(jQuery) {
   jQuery(document).ready(function(){
    var date = "2019-02-12";
    var myDate = new Date(date);
    myDate.setDate(myDate.getDate() + 2);
    jQuery("#countdown").countdown(myDate, function (event) {
        jQuery(this).html(
            event.strftime('<div class="timer-wrapper"><div class="time">%D</div><span class="text">days</span></div><div class="timer-wrapper"><div class="time">%H</div><span class="text">hrs</span></div><div class="timer-wrapper"><div class="time">%M</div><span class="text">mins</span></div><div class="timer-wrapper"><div class="time">%S</div><span class="text">sec</span></div>');
        );
    });
  });
});

edited Feb 12, 2019 at 12:13

answered Feb 12, 2019 at 10:07

Aasim Goriya

5,4622 gold badges31 silver badges54 bronze badges

still same error.

sudo55
– sudo55

2019-02-12 11:56:43 +00:00
Commented Feb 12, 2019 at 11:56
can you try to add $(document).ready(function() and check it again ? pelase check my updated code for more information

Aasim Goriya
– Aasim Goriya

2019-02-12 11:58:29 +00:00
Commented Feb 12, 2019 at 11:58
after using your updated code TypeError: $ is undefined[Learn More] countDown.js:221:5 SyntaxError: expected expression, got '<'[Learn More]

sudo55
– sudo55

2019-02-12 12:00:16 +00:00
Commented Feb 12, 2019 at 12:00
did you call countDown.js in your requirejs-config.js file ?

Aasim Goriya
– Aasim Goriya

2019-02-12 12:01:42 +00:00
Commented Feb 12, 2019 at 12:01
yes, check in question, i have added my files in question,

sudo55
– sudo55

2019-02-12 12:02:42 +00:00
Commented Feb 12, 2019 at 12:02

| Show 2 more comments

Stack Exchange Network

ReferenceError: jQuery is not defined Magento 2

2 Answers 2

Your Answer

Hot Network Questions

ReferenceError: jQuery is not defined Magento 2

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions