Why error “$ is not defined” occurred in jQuery ?

One of the most common errors faced by jQuery developers is the ‘$ is not defined’ error. At first, it may seem like a small error, but considering the fact that more than 70 percent of the website uses jQuery in some form or other, this may turn out to create a huge mess.

Reason behind this error:
This error basically arises, when the developer is using a variable, before declaring it in the script.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

// ReferenceError: num is not defined
num; 
  
declaration
var num; 
  
// No more errors
data; 

chevron_right


Output:



In the above example, we see that ‘num’ has been called before it was declared. This is why ReferenceError: num is not defined was thrown in the first line. In the third line, ‘num’ is called again. However, no error will be thrown this time, as the variable has already been defined in the second line of the script.

This is a very common error. The best way to avoid this is to hoist all the variables and functions before calling them. Have a look at another example.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

//reference error
process(); 
  
process = function(){
var a = 2;
console.log(a);
}
  
// no error
process(); 

chevron_right


Output:

Most common reasons for this error:

  1. Embedding jQuery plugin before the jQuery script file
    ‘$’ is used to declare any variable in jQuery. A plug-in is basically a code chunk written beforehand. These chunks use predefined jQuery functions and methods. Therefore, it is necessary to embed the jQuery script file before the plugin file. Otherwise, the application won’t understand the jQuery coding.

    Correct Order:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <script src="/lib/jquery.min.js"></script>
    <script src="/lib/jquery.plugin.js"></script>

    chevron_right

    
    

  2. CDN hosted jQuery problem:
    It is possible that the CDN hosted jQuery version, used for the website, might have been blocked on the customer’s connection. This type of issue is generally observed on IP addresses originating from countries like China, Indonesia, Korea, etc.
    To avoid this issue, it is better to provide a locally-hosted fallback version of jQuery.
    Eaxmple:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    //an external CDN link
    <script src=
    </script>
      
    //fall back to local jQuery
    <script>
    window.jQuery || document.write('
    <script src="http://www.mywebsite.com/jquery.min.js"><\/script>'))
    </script>

    chevron_right

    
    



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : Akanksha_Rai