Uncaught ReferenceError: $ is not defined + Yett Blocking code

Technical Q&A
1

Hello!

I did some inspection on Google Console for my website and I got this error “Uncaught Reference Error: $ is not defined.”

It is most probably linked to YETT - a webpage library to control the execution of (third party) scripts - that has been added by the coder while improving my website speed and performance.

YETT script has been added to the theme SNIPPET and also on the THEME.LIQUID

On the SNIPPET this is the code:

On the THEME.LIQUID

Just After the there is the inclusion of YETT script

Quondy_1-1645088252321.png
Quondy_1-1645088252321.png1920×1030 332 KB

And at the end before the closing there is this script recalling YETT

I have removed one of the app that YETT is blocking (Judge.me) and also the script has Failed to render the app block.

So the questions are:

  • How to fix the “Uncaught Reference Error: $ is not defined.”?
  • Is the YETT code correct and well positioned in the Theme. Liquid?
  • How to remove the from YETT snippet section code the Blacklist -Whitelist referencing to Judge.me app?
  • How to remove the Failed to render the app block ?

Can someone please explain or try to help with some solutions?

Thank you

Martina

2 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

@Quondy
Add this code in the theme.liquid
file on the bottom of tag.

3

Hello there,

Regarding your first question “Uncaught Reference Error: $ is not defined”. The error means your code is using jQuery without including the library. You can fix this by including jQuery library. You can quickly grab jQuery CDN to put to here: https://releases.jquery.com/

Question 2: I’m not sure but in my opinion, it is correct

Question 3+4: I don’t really understand your questions and contexts. Can you elaborate more?

4

@Quondy

Essentially that error means that you either don’t have jQuery installed or the script is being loaded before jQuery’s initialization. If the app you’re using requires jQuery to be installed, you should contact the developers to assist you.

It’s also important to bear in mind that jQuery is pretty heavy and, although it is widely used, it is slowly becoming deprecated and avoided.

Kind regards,
Diego

5

@Zworthkey Tried it out but still got the same Uncaught ReferenceError: $ is not defined.

I added to the tag on the Theme.Liquid file

6

@Quondy
it’s occur from third party app.
you have to configure about the App js files /
from which these issues occur.

7

Question 3+4: I don’t really understand your questions and contexts. Can you elaborate more?

Sure! Actually the questions 3 and 4 refer to the same thing.

What I mean is that YETT has been added to block the Judge.me + Tawk.to apps.

Since I have deleted the judge me app from the theme, the YETT is failing in blocking the Judge me app as it has been deleted. So my guessing is that in the snippet code of Yett there should be a portion of code referring to the blocking of the Judge.me app, but I am no coding expert.

I have tried to remove the Judge from here

YETT_BLACKLIST = [ /judge/, /tawk.io/] but the "Failure to block app" is still there. No change at all.
8

@Quondy
if you are not a coding expert then you need to hire a developer, or you need a developer to fix out your issues.

9

I have solved it.

I just replaced the first with this code below.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
10

@Quondy
Have you solved your Issues?

11

Yes I have :slightly_smiling_face:

12

There is a non-existent variable referenced somewhere. This variable needs to be declared, or you need to make sure it is available in your current script or scope. Basically $ is an alias of jQuery() so when you try to call/access it before declaring the function, it will endup throwing this $ is not defined error . This usually indicates that jQuery is not loaded and JavaScript does not recognize the $. Even with $(document).ready , $ is still going to be undefined because jquery hasn’t loaded yet.

To solve this error:

Load the jQuery CDN library at the beginning of all your javascript files/scripts which uses $ or jQuery, so that $ can be identified in scripts .

13

This is how I edit the code and resolved the issue:

var replaced = false;

$(window).on(‘keyup keypress scroll touch click mousemove’, function(e) {

if(!replaced){
console.log(‘yett unblocked’);
window.yett.unblock() ;

replaced = true;
}
});

Nevertheless I found out that at the bottom of the website page a piece of code was appearing.

var replaced = false;

$(window).on(‘keyup keypress scroll touch click mousemove’, function(e) {

if(!replaced){
console.log(‘yett unblocked’);
window.yett.unblock() ;

replaced = true;
}
});

I don’t know if I added the code correctly or not.

Thank you

14

Thank you so much! through the link you shared I understood where to place the script.

The problem is gone.

Thanks to you and @Zworthkey for giving me the missing part.

Thank you so much!

15

@Quondy
if helpful like and accept our Solution