Comment corriger l’erreur « Uncaught TypeError : $ Is Not a Function » ?

WordPress supporte pleinement JavaScript ainsi que la bibliothèque jQuery. Cependant, la manière dont WordPress implémente jQuery peut conduire à des erreurs lorsque vous essayez d’exécuter des fonctions. L’un des problèmes les plus courants est l’erreur « Uncaught TypeError : $ is not a function ».

La résolution de cette erreur est relativement simple si vous en comprenez la cause. L’alias « $ » est au cœur du problème, et jQuery et WordPress proposent plusieurs façons de le contourner afin que vous puissiez exécuter les fonctions dont vous avez besoin.

Dans cet article, nous allons expliquer ce qu’est l’erreur « Uncaught TypeError : $ is not a function » et ce qui la provoque. Nous vous montrerons ensuite comment la résoudre. Commençons par le commencement !

Qu’est-ce que l’erreur « Uncaught TypeError : $ Is Not a Function » dans WordPress ?

L’erreur « Uncaught TypeError : $ is not a function » est une erreur JavaScript courante qui se produit lorsque la bibliothèque jQuery n’est pas chargée correctement ou qu’il y a un conflit avec d’autres scripts utilisant le symbole « $ ».

Dans WordPress, cette erreur est plus liée à la manière dont le système de gestion de contenu (Content Management System ou CMS) implémente jQuery qu’à des problèmes de chargement.

jQuery est une bibliothèque JavaScript très répandue. Elle est largement utilisée dans les thèmes et les extensions WordPress pour gérer divers éléments dynamiques, animations et opérations AJAX :

Dans jQuery, le symbole « $ » est un alias pour l’objet jQuery, qui est le principal objet avec lequel vous interagissez lorsque vous travaillez avec la bibliothèque. Il rend le code plus court, plus lisible et plus facile à écrire.

L’erreur « Uncaught TypeError : $ is not a function » est quelque peu difficile à résoudre car vous ne verrez pas de message d’erreur clair. Contrairement à d’autres erreurs WordPress, ce problème peut être déclenché par des éléments mal configurés sur votre site ou même par une page d’erreur 404 :

La manière la plus efficace de diagnostiquer le problème est de jeter un coup d’œil à la console du développeur ou d’utiliser les journaux de débogage de WordPress.

Quelles sont les principales causes de l’erreur « Uncaught TypeError : $ Is Not a Function » ?

L’erreur « Uncaught TypeError : $ is not a function » a tout à voir avec jQuery. Vous rencontrerez ce problème lorsqu’une fonction comprenant le symbole « $ » est exécutée pendant le chargement du site web.

Voici quelques causes potentielles de cette erreur :

1. La bibliothèque jQuery n’est pas correctement chargée. Si la bibliothèque jQuery n’est pas correctement chargée ou mise en file d’attente, le symbole « $ » ne sera pas reconnu comme une fonction valide et une erreur sera générée. Ce n’est généralement pas un problème avec WordPress, car le système de gestion de contenu (CMS) charge la bibliothèque de manière native.
2. Vous utilisez jQuery en mode noConflict. Par défaut, WordPress utilise jQuery en mode noConflict. Cela signifie qu’il ne reconnaît pas le symbole « $ » comme nom de fonction. Pour l’utiliser, vous devrez mettre en place une solution de contournement.
3. Conflits d’extensions ou de thèmes. Des extensions ou des thèmes peuvent contenir du JavaScript mal codé qui interfère avec le bon fonctionnement de jQuery ou qui utilise le symbole « $ » d’une manière qui cause des problèmes avec d’autres scripts.

En résumé, WordPress n’est pas configuré pour reconnaître le symbole « $ ». Toutefois, cela ne signifie pas que vous ne pouvez pas exécuter du code jQuery dans le CMS. Après tout, la bibliothèque fait partie de WordPress. Ce que vous devez faire, c’est utiliser une solution de contournement pour éviter les problèmes liés au symbole « $ ».

Comment corriger l’erreur « Uncaught TypeError : $ Is Not a Function » (2 façons)

Avant de commencer à travailler, il est important de noter que jQuery fait déjà partie de WordPress. Certains tutoriels vous demanderont de mettre jQuery en file d’attente, mais la bibliothèque fait partie du système de gestion de contenu (CMS) depuis un certain temps.

WordPress utilise également jQuery en mode « noConflict » dès le départ. Cela signifie qu’il libère le symbole « $ » pour que d’autres bibliothèques puissent l’utiliser. Au lieu de désactiver le mode « noConflict », voici comment vous devriez aborder ce problème.

1. Utiliser « jQuery » au lieu de « $ »

Si vous rencontrez des problèmes lors de l’utilisation du symbole « $ » dans les fonctions, vous pouvez utiliser « jQuery » à la place. Pour vous donner un exemple, voici à quoi peut ressembler une fonction jQuery de base utilisant « $ » :

$(function() {
  // Your code here will run once the DOM is ready
});

Dans ce cas, une solution rapide consisterait à remplacer le symbole « $ » par jQuery. Le code ressemblerait alors à ceci :

jQuery(function() {
  // This code will not trigger the error
});

Vous pouvez également « envelopper » le code dans une expression de fonction immédiatement invoquée qui contient le symbole jQuery. L’exemple suivant ne déclencherait pas l’erreur « Uncaught TypeError : $ is not a function » parce qu’il utilise le symbole jQuery comme wrapper :

jQuery(function ($) {
    // You can use $ inside the wrapper
    console.log($('.primary-menu'));
});

Après avoir apporté ces modifications au code, vous pouvez utiliser la console de développement de votre navigateur ou le journal de débogage de WordPress pour voir si l’erreur persiste. Si c’est le cas, vous devrez peut-être associer « jQuery » à un autre symbole pour éviter d’autres erreurs.

2. Utiliser un alias personnalisé dans jQuery

« $ » est l’alias par défaut de l’objet jQuery. Cependant, comme WordPress exécute jQuery en mode noConflict, vous pouvez avoir besoin d’un alias alternatif pour éviter les conflits avec d’autres bibliothèques.

Ce processus est relativement simple, car vous pouvez associer l’alias à un nouveau symbole avec une seule ligne de code :

vvar $j = jQuery;

Ce code remplace l’alias par défaut par « $j », mais il peut être n’importe quoi d’autre. Certains développeurs préfèrent cette approche plutôt que d’avoir à saisir l’objet « jQuery » complet, comme nous l’avons montré dans la méthode précédente.

Si vous ne savez pas où ajouter ce code, vous pouvez lire notre tutoriel sur l’ajout de code dans l’en-tête et le pied de page de WordPress. Gardez à l’esprit que même si vous enregistrez un nouvel alias, vous pourrez toujours utiliser « jQuery » à la place de ce symbole.

En résumé

WordPress vous permet d’utiliser jQuery sur votre site web. Cependant, si vous voulez éviter des erreurs telles que « Uncaught TypeError : $ is not a function », vous devez comprendre comment le CMS met en œuvre la bibliothèque. WordPress utilise le mode « noConflict » de jQuery, ce qui signifie qu’il ne reconnaît pas le symbole « $ ».

L’erreur « Uncaught TypeError : $ is not a function » apparaît lorsque vous essayez d’utiliser une fonction qui appelle jQuery en utilisant « $ ». Pour contourner ce problème, vous pouvez saisir l’objet jQuery complet à la place ou associer l’alias à un symbole différent pour éviter les conflits.

Si vous utilisez Kinsta, vous pouvez activer le mode de débogage de WordPress dans le tableau de bord MyKinsta pour diagnostiquer les problèmes. De plus, tous nos plans offrent un support de qualité pour vous aider à résoudre les problèmes que vous pourriez rencontrer. Découvrez nos plans !