Si vous utilisez jQuery, Angular JS, ou le vieux JavaScript ordinaire et que vous obtenez l’erreur « Uncaught ReferenceError : $ is not defined », ce qui signifie que $ est soit une variable, soit une méthode que vous essayez d’utiliser avant de la déclarer en utilisant le mot-clé var. En jQuery, c’est le nom court de la fonction jQuery() et le plus souvent utilisé dans $(document).ready(function()). Si vous faites des trucs jQuery lorsque DOM est chargé et que vous obtenez cette erreur, cela signifie que votre navigateur a un problème de chargement de la bibliothèque jQuery soit à partir d’internet ou du système de fichiers local.
Dans cet article, vous verrez certaines des raisons les plus courantes de l’erreur « Uncaught ReferenceError : $ is not defined » et comment les résoudre, mais avant cela, apprenons quelques bases sur la redoutable erreur Uncaught ReferenceError : $ is not defined error.
Et, si vous voulez apprendre le JavaScript moderne ou mettre à niveau vos compétences, alors je vous suggère de rejoindre The Complete JavaScript Course : Build Real Project par Jonas Scmedtmann sur Udemy. C’est l’un des meilleurs cours et main-son pour apprendre ES 6 et d’autres nouvelles fonctionnalités Javascript.
L’une des raisons courantes pour une telle erreur est de commencer directement avec jQuery sans connaître les fondamentaux de JavaScript. J’ai vu de nombreux développeurs web qui viennent de Java, C#, HTML, et Python fond commencé à utiliser jQuery sans savoir beaucoup sur JavaScript.
S’il vous arrive de travailler sur le même scénario, je vous suggère fortement de lire au moins l’un des bons livres JavaScript pour les débutants par exemple Head First JavaScript. N’oubliez jamais que jQuery est une bibliothèque construite sur JavaScript, une fois que vous connaissez JavaScript, il est beaucoup plus facile de dépanner toute erreur de jQuery.
Uncaught ReferenceError : X n’est pas défini
Puisque JavaScript s’exécute à l’intérieur du navigateur, votre navigateur comme Firefox, Chrome, Edge ou Internet Explorer lance cette erreur lorsque vous utilisez une variable qui n’est pas définie, par exemple, le code suivant lancera cette erreur, mais une fois que vous déclarez la variable en utilisant le mot clé var, l’erreur disparaîtra :
data ; // ReferenceError : data is not definedvar data;data ; // Plus d'erreurs
De même, si vous accédez à une méthode avant de la déclarer, vous obtiendrez cette erreur comme indiqué ci-dessous :
process() ; // ReferenceError : process is not definedprocess = function(){};process() ; // Aucune erreur
Maintenant que vous avez appris quand le navigateur jette Uncaught ReferenceError : $ n’est pas défini, il est temps d’examiner certaines raisons courantes pour lesquelles cette erreur se produit lors de l’utilisation de jQuery, AngularJS ou toute autre bibliothèque JavaScript qui utilise $ comme raccourci.
1) L’une des raisons les plus courantes de « ReferenceError : $ is not defined » dans une application basée sur jQuery est que le plugin jQuery est inclus avant le fichier jQuery. Puisque le plugin jQuery utilise $, il lance « ReferenceError : $ is not defined » s’il ne trouve pas, ce qui est logique car jQuery n’a pas été chargé jusque là.
<script src="/lib/jquery.plugin.js"></script><script src="/lib/jquery.min.js"></script>
Solution : Incluez le fichier jquery.js avant tout fichier de plugin jQuery.
<script src="/lib/jquery.min.js"></script><script src="/lib/jquery.plugin.js"></script>
2) La deuxième raison la plus courante d’obtenir « ReferenceError : $ n’est pas défini » dans jQuery est due au chemin d’accès incorrect, soit c’est une faute de frappe ou le fichier jQuery est déplacé à un autre endroit, le navigateur n’est pas en mesure de charger le fichier jQuery.
Une solution de ce problème est simplement de fixer le chemin de la bibliothèque jQuery. Si vous téléchargez jQuery à partir de CDN, alors vous pouvez également utiliser le fichier jQuery hébergé par Google, qui est presque toujours disponible.
3) Une autre raison bizarre mais courante de « ReferenceError : $ is not defined » dans jQuery » est que vous pourriez travailler hors ligne mais charger jQuery à partir d’internet. C’est l’une des erreurs stupides que chaque
développeur web fait à un moment ou à un autre. La solution est simple, soit vous vous connectez à internet, soit vous utilisez une copie locale de la bibliothèque jQuery comme indiqué ci-dessous :
<script src="/js/jquery.min.js"></script>